jQuery รับค่าตัวเลือกที่เลือก (ไม่ใช่ข้อความ แต่เป็นค่า 'คุณสมบัติ')

โอเคฉันมีรหัสนี้:

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

และฉันต้องการรับค่าของตัวเลือกที่เลือก ตัวอย่าง: เลือก 'ตัวเลือก 2' และค่าของมันคือ '2' '2' คือค่าที่ฉันต้องได้รับและไม่ใช่ 'ตัวเลือก 2'

04/2020: คำตอบเก่าที่ถูกต้อง

ใช้: ตัวเลือก psuedo ที่เลือกไว้บนตัวเลือกที่เลือกไว้จากนั้นใช้ฟังก์ชัน. 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() จะได้รับค่า

คุณต้องเพิ่มรหัสในการเลือกของคุณ แล้ว:
$('#selectorID').val()

ลองสิ่งนี้:

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

หรือ

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

คุณสามารถใช้jqueryดังนี้

SCRIPT

  $('#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();

<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') พบ ( 'ตัวเลือก: เลือก') 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());
        });