jquery select change event get selected option

235

私はこれでselect要素のchangeイベントにイベントをバインドしました：

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

});

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

jquery events

— ズラキス
ソース

1

なぜそのようなことを言うのですか？

— ミゲル

3

@superuberduper私はできる限りjqueryを避けましたが、抵抗は無駄です。あなたが同化した後、あなたはとても気分が良くなります。

— adg '27

lolol @adgとても良い！

— SuperUberDuper 2017

461

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

— ナフタリ別名ニール
ソース

8

$（ "selector"、this）構文はどういう意味ですか？私は一般的な考えを持っていますが、完全には

— わかり

14

@JoshWillikは、のコンテキスト内の$("selector", this)すべてのselector要素を検索していthisます。執筆 $("selector", this)はほぼ同じ $(this).find('selector')

— ベラッシュ2014年

8

@JoshWillik：はの$()エイリアスなjQuery()ので、ドキュメントはここにあります：api.jquery.com/jQuery署名は明らかにそこにありjQuery( selector [, context ] )ます。@ベラッシュ：「ほぼ同じ」の場合、違いは何ですか？または何が速いですか？.find()これはよりオブジェクト指向のIMO

— なので

7

複数選択の場合の確認方法は？

— Hemant_Negi

3

@AdrianFöderあなたとそれを探している他の人にとって、.find()この回答によれば、約10％高速です：stackoverflow.com/a/9046288/2767703

— Kevin van Mierlo

75

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();
   });

— ベラッシュ
ソース

optionイベントへのバインドは、特にモバイルデバイスでは、危険な命題です。たとえば、Webkitはこのイベントを正しくサポートしていません：bugs.chromium.org/p/chromium/issues/detail?id

— Ian Kemp

うんいいね！すでに述べたように、2番目のソリューションは多くのブラウザーでサポートされていません。

— Bellash、2016

15

委任された代替

だれかがリスナーに委任されたアプローチを使用している場合は、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デモ

— DanielST
ソース

これは私が欲しいものなので+1ですが、これをローカルで試したところ、機能しませんでした.jsfiddleでのみ機能します。追加する必要があるCDNは何ですか？

— AVI

6

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

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

— 1.44 MB
ソース

selectedOptions一部のブラウザではご利用いただけません。

— BernhardDöbler2016

@BernhardDöblerどれ？任意のソース？

— 1.44mb

1

コードをIE 11にコピーしてエラーが発生しました。私はで終わったthis.options[ this.options.selectedIndex ]。Mozillaによると、26からFirefox、IEはサポートされていません。

— BernhardDöbler2016

6

<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値を変更すると、現在選択されている値を取得できます。

1

回答の詳細な説明を教えてください。

— モスタフィズ

@MostafizurRahman私のコードは非常に簡単なので、コードだけを書きました。

3

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

— セルダルカラカ
ソース

2

選択した値の値を取得する別の短い方法、

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

— レセプカン
ソース

この場合、なぜ「var selectedVal = $（ "＃selectElement"）。val（）」が機能しないのですか？

— LuisE

ケースは、選択要素で発行された変更イベントのときに値を取得しています。そのようにした場合、選択を変更しても値は更新されません。

— Recep Can

0

公式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

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

デモ用

$(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>

スニペットを展開

— 開発者
ソース