jquery - jQuery 選択変更イベント取得選択オプション

Question

これを使用して、select 要素の変更イベントにイベントをバインドしました。

$('select').on('change', '', function (e) {

});

change イベントが発生したときに選択された要素にアクセスするにはどうすればよいですか?

score 521 · Accepted Answer

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

score 19 · Accepted Answer

委任された代替

誰かがリスナーに委任されたアプローチe.targetを使用している場合は、 (選択要素を参照します) を使用します。

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

JSFiddleデモ

score 10 · Accepted Answer

<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

最初にを作成しselect optionます。その後、jqueryユーザーが値を変更したときに現在選択されている値を取得できselect optionます。

score 7 · Accepted Answer

これは短くてきれいだと思います。さらに、複数のアイテムがある場合は、選択したアイテムを反復処理できます。

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

score 1 · Accepted Answer

これもうまくいきます

(function(jQuery) {
  $(document).ready(function() {
    $("#select_menu").change(function() {
      var selectedOption = $("#select_menu").val()
    });
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

score 0 · Accepted Answer

このjquery select changeイベントを使用して、選択したオプション値を取得できます

デモ用

$(document).ready(function () {   
    $('body').on('change','#select', function() {
         $('#show_selected').val(this.value);
    });
});

<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>  
<body>  
<select id="select">
 <option value="">Select One</option>
    <option value="PHP">PHP</option>
    <option value="jAVA">JAVA</option>
    <option value="Jquery">jQuery</option>
    <option value="Python">Python</option>
    <option value="Mysql">Mysql</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>

jquery - jQuery 選択変更イベント取得選択オプション

10 に答える 10

委任された代替

Related

Reference