jQuery nhận giá trị tùy chọn đã chọn (không phải văn bản, nhưng thuộc tính 'value')

Được rồi, tôi có mã này:

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

Và tôi muốn nhận được giá trị của tùy chọn đã chọn. Ví dụ: 'Tùy chọn 2' được chọn và giá trị của nó là '2'. '2' là giá trị tôi cần nhận chứ không phải 'Tùy chọn 2'.

04/2020: Sửa câu trả lời cũ

Sử dụng : bộ chọn psuedo đã chọn trên các tùy chọn đã chọn và sau đó sử dụng hàm .val để lấy giá trị của tùy chọn.

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

Lưu ý bên : Sử dụng bộ lọc sẽ tốt hơn sau đó sử dụng :selectedbộ chọn trực tiếp trong truy vấn đầu tiên.

Nếu bên trong trình xử lý thay đổi, bạn có thể sử dụng đơn giản this.valueđể nhận giá trị tùy chọn đã chọn. Xem bản demo để có thêm tùy chọn.

//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>

Câu trả lời cũ:

Chỉnh sửa: Như nhiều người đã chỉ ra, điều này không trả về giá trị tùy chọn đã chọn.

~ ~ Sử dụng .val để lấy giá trị của tùy chọn đã chọn. Xem bên dưới,

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

Tôi chỉ muốn chia sẻ kinh nghiệm của tôi

Cho tôi,

$('#selectorId').val()

trả về null.

Tôi đã phải sử dụng

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

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

ví dụ jsFiddle

.val() sẽ nhận được giá trị.

Bạn cần thêm một id để chọn. Sau đó:
$('#selectorID').val()

Thử cái này:

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

hoặc là

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

bạn có thể sử dụng jquerynhư sau

KỊCH BẢN

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

FIDDLE ở đây

Đối với một lựa chọn như thế này

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

... bạn có thể lấy id theo cách này:

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

Hoặc bạn có thể sử dụng giá trị thay thế và lấy nó một cách dễ dàng ...

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

như thế này:

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

Một trong những lựa chọn của tôi không có giá trị : <option>-----</option>. Tôi đã cố gắng sử dụng if (!$(this).val()) { .. }nhưng tôi đã nhận được kết quả lạ. Hóa ra nếu bạn không có valuethuộc tính trên thành <option>phần của mình , nó sẽ trả về văn bản bên trong nó thay vì một chuỗi trống. Nếu bạn không muốn val()trả lại bất cứ điều gì cho tùy chọn của mình, hãy đảm bảo thêm value="".

Nhìn vào ví dụ:

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

HOẶC LÀ

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

HOẶC LÀ

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

mã này hoạt động rất tốt đối với tôi: điều này trả về giá trị của tùy chọn đã chọn. $ ('# select_id'). find ('tùy chọn: đã chọn'). val ();

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

Liên kết nguồn

Sử dụng jQuery val () để NHẬN Giá trị được chọn và văn bản () để GET Văn bản tùy chọn.

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

Thay đổi sự kiện khi chọn thả xuống

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

Nhấn vào nút

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