web-dev-qa-db-ja.com

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

私はこれで私のselect要素のchangeイベントにイベントを結び付けました：

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

});

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

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

jQuery find メソッドを使用できます。

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

上記の解決策は完璧に動作しますが、私は彼らがクリックされたオプションを取得しても構わないと思っているために以下のコードを追加することを選択します。この選択値が変更されていなくても、選択されたオプションを取得できます。 （Mozillaでのみテスト済み）

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });
68
Bellash

代行代替案

誰かがリスナーに 委任アプローチ を使用している場合は、e.targetを使用します（これはselectエレメントを参照します）。

$('#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デモ

15
slicedtoad

私はこれがもっと短くてきれいだと思う。さらに、選択した項目が複数ある場合は、それを繰り返すことができます。

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});
5
1.44mb
<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の値を変更したときに現在選択されている値を取得できます。

5
user6270989
$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});
1
Serdar Karaca

選択した値の値を取得するためのもう1つの簡単な方法

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});
1
Recep Can

選択されたオプションの値を取得するには、この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>
0
Devendra Dode

公式のAPIドキュメントを参照してください https://api.jquery.com/selected-selector/

この良い作品：

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

そして

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

そしてユニークな選択が簡単

var SelVal = $( "#idSelect option:selected" ).val();
0
alex Roosso