jQueryは選択されたオプション値を取得します（テキストではなく属性 'value'）

さて、私はこのコードを持っています：

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

そして、私は選択されたオプションの値を取得したいと思います。例：「オプション2」が選択され、その値は「2」です。「2」は「オプション2」ではなく、取得する必要がある値です。

2020年4月：古い回答を修正

使用選択：選択したオプションに擬似セレクタを使用して、.valオプションの値を取得する機能を。

$('select[name=selector] option').filter(':selected').val()

補足：:selected最初のクエリでセレクタを直接使用するよりも、フィルタを使用する方が適切です。

変更ハンドラー内の場合は、単に使用this.valueして、選択したオプションの値を取得できます。その他のオプションについては、デモを参照してください。

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

古い答え：

編集：多くの人が指摘したように、これは選択されたオプション値を返しません。

~~ .valを使用して、選択したオプションの値を取得します。下記参照、

$('select[name=selector]').val()~~

私の経験を共有したかっただけです

私のために、

$('#selectorId').val()

nullを返しました。

私は使用しなければなりませんでした

$('#selectorId option:selected').val()

$('select').change(function() {
    console.log($(this).val())
});​

jsFiddleの例

.val() 値を取得します。

選択にIDを追加する必要があります。次に：
$('#selectorID').val()

これを試して：

$(document).ready(function(){
    var data= $('select').find('option:selected').val();
});

または

var data= $('select').find('option:selected').text();

jquery次のように使用できます

脚本

  $('#IDOfyourdropdown').change(function(){
    alert($(this).val());
  });

FIDDLEはこちら

このような選択のために

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option id="0">CHOOSE AN OPTION</option>
   <option id="127">John Doe</option>
   <option id="129" selected>Jane Doe</option>

...この方法でIDを取得できます。

$('#list-name option:selected').attr('id');

または、代わりに値を使用して、簡単な方法で取得することもできます...

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option value="0">CHOOSE AN OPTION</option>
   <option value="127">John Doe</option>
   <option value="129" selected>Jane Doe</option>

このような：

$('#list-name').val();

私のオプションの1つに値がありませんでした：<option>-----</option>。使おうとしif (!$(this).val()) { .. }たのですが、奇妙な結果になりました。要素にvalue属性がない場合<option>は、空の文字列ではなく、要素内のテキストを返します。val()オプションで何も返さない場合は、必ずを追加してくださいvalue=""。

例を見てください：

    <select class="element select small" id="account_name" name="account_name"> 

        <option value="" selected="selected">Please Select</option>           
        <option value="paypal" >Paypal</option>
        <option value="webmoney" >Webmoney</option>

    </select>

 <script type="text/javascript">

        $(document).ready(function(){ 
             $('#account_name').change(function(){
               alert($(this).val());                                                          
             });
        });
 </script>

$('#selectorID').val();

または

$('select[name=selector]').val();

または

$('.class_nam').val();

このコードは私にとって非常にうまく機能します：これは選択したオプションの値を返します。$（ '＃select_id'）。find（ 'option：selected'）。val（）;

 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });

ソースリンク

使用jQueryのvalが（）するGET価値とし、選択したテキストを（）オプションのテキストを取得します。

    <select id="myDropDown" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

選択ドロップダウンでイベントを変更

        $("#myDropDown").change(function () {

            // Fetching Value
            console.log($(this).val());

            // Fetching Text
            console.log($(this).find('option:selected').text());

            alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
        });

ボタンクリック

        $("button").click(function () {

        // Fetching Value
            console.log($("#myDropDown").val());

    // Fetching Text
            console.log($('#myDropDown option:selected').text());

            alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
        });