jquery - 選択オプションの現在の値を取得する

Question

    <script type="text/javascript">
            $(document).ready(function(){
                    $('#number').change(function(){
                     $("#number option:selected").text();
                   //alert('Value change to ' + $(this).attr('value'));
                   $('#numberdiv').html('You selected: ' + $(this).attr('value'));
            });
        });
    </script>

<select id="number" data-corners="false" data-icon="false">
                    <option value="9 ">9 </option>
                    <option value="18 ">18 </option>
                    <option value="27 ">27 </option>
                    <option value="36 ">36 </option>
                    <option value="54 ">54 </option>
                </select>
                <div id="numberdiv"></div>

これは正常に機能していますが、現在の値である 9 を表示することはできません。他の値に変更した後、9 の値を表示できます。それらは 9 に戻ります。"You selected: 9 」は、選択を変更しなくても表示されます

Answer 1

ハンドラーが.trigge('change')またはショートカットを使用して登録された後、変更イベントを手動でトリガーする必要があります.change()

$(document).ready(function () {
    $('#number').change(function () {
        $('#numberdiv').html('You selected: ' + this.value);
    }).change();
});

デモ:フィドル

Answer 2

次のように、変更関数を引き出して、起動時に一度実行してみてください。

$(document).ready(function () {
    var numberChange = function () {
        $("#number option:selected").text();
        //alert('Value change to ' + $(this).attr('value'));
        $('#numberdiv').html('You selected: ' + $(this).attr('value'));
    });

    $('#number').change(numberChange);
    numberChange();
});

Answer 3

document.ready 内で作成した関数は、選択した変更関数のみをキャプチャしているためです。

追加してみてください

$('#numberdiv').html('You selected: ' + $(this).attr('value'));

の外

 $('#number').change(function(){
                 $("#number option:selected").text();
               //alert('Value change to ' + $(this).attr('value'));
               $('#numberdiv').html('You selected: ' + $(this).attr('value'));
        });