jQuery chọn tùy chọn từ thả xuống

Thông thường tôi sử dụng $("#id").val()để trả về giá trị của tùy chọn đã chọn, nhưng lần này nó không hoạt động. Thẻ được chọn có idaioConceptName

Mã HTML

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Đối với các tùy chọn thả xuống, bạn có thể muốn một cái gì đó như thế này:

var conceptName = $('#aioConceptName').find(":selected").text();

Lý do val()không thực hiện được mẹo là vì nhấp vào một tùy chọn sẽ không thay đổi giá trị của danh sách thả xuống - nó chỉ thêm thuộc :selectedtính vào tùy chọn đã chọn là con của danh sách thả xuống.

Đặt các giá trị cho mỗi tùy chọn

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()không hoạt động vì .val()trả về valuethuộc tính. Để nó hoạt động chính xác, các valuethuộc tính phải được đặt trên mỗi <option>.

Bây giờ bạn có thể gọi $('#aioConceptName').val()thay vì tất cả các :selectedvoodoo này được đề xuất bởi những người khác.

Tôi tình cờ gặp câu hỏi này và đã phát triển một phiên bản ngắn gọn hơn cho câu trả lời của Elliot BOnneville:

var conceptName = $('#aioConceptName :selected').text();

hoặc nói chung:

$('#id :pseudoclass')

Điều này giúp bạn tiết kiệm thêm một cuộc gọi jQuery, chọn mọi thứ trong một lần chụp và rõ ràng hơn (ý kiến ​​của tôi).

Hãy thử điều này cho giá trị ...

$("select#id_of_select_element option").filter(":selected").val();

hoặc cái này cho văn bản ...

$("select#id_of_select_element option").filter(":selected").text();

Nếu bạn đang ở trong bối cảnh sự kiện, trong jQuery, bạn có thể truy xuất phần tử tùy chọn đã chọn bằng cách sử dụng:
$(this).find('option:selected')như thế này:

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

Biên tập

Như được đề cập bởi PossessWithin , câu trả lời của tôi chỉ trả lời cho câu hỏi: Cách chọn "Tùy chọn" đã chọn.

Tiếp theo, để có được giá trị tùy chọn, sử dụng option.val().

Bạn đã xem xét sử dụng javascript cũ đơn giản?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

Xem thêm Nhận văn bản / giá trị tùy chọn với JavaScript

$('#aioConceptName option:selected').val();

Đọc giá trị (không phải văn bản) của một lựa chọn:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

Làm thế nào để vô hiệu hóa một lựa chọn? trong cả hai biến thể, giá trị có thể được thay đổi bằng cách sử dụng:

Một

Người dùng không thể tương tác với danh sách thả xuống. Và anh ta không biết những lựa chọn khác có thể tồn tại.

$('#Status').prop('disabled', true);

B

Người dùng có thể thấy các tùy chọn trong danh sách thả xuống nhưng tất cả chúng đều bị tắt:

$('#Status option').attr('disabled', true);

Trong trường hợp này, $("#Status").val() sẽ chỉ hoạt động cho các phiên bản jQuery nhỏ hơn 1.9.0. Tất cả các biến thể khác sẽ làm việc.

Làm thế nào để cập nhật một lựa chọn bị vô hiệu hóa?

Từ mã phía sau bạn vẫn có thể cập nhật giá trị trong lựa chọn của bạn. Nó chỉ bị vô hiệu hóa cho người dùng:

$("#Status").val(2);

Trong một số trường hợp, bạn có thể cần phải bắn các sự kiện:

$("#Status").val(2).change();

<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>

bạn nên sử dụng cú pháp này:

var value = $('#Id :selected').val();

Vì vậy, hãy thử mã này:

var values = $('#aioConceptName :selected').val();

bạn có thể kiểm tra trong Fiddle: http://jsfiddle.net/PJT6r/9/

xem về câu trả lời này trong bài viết này

Sử dụng jQuery, chỉ cần thêm một changesự kiện và nhận giá trị hoặc văn bản đã chọn trong trình xử lý đó.

Nếu bạn cần văn bản đã chọn, vui lòng sử dụng mã này:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

Hoặc nếu bạn cần giá trị được chọn, vui lòng sử dụng mã này:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

Sử dụng jQuery.val()chức năng cho các yếu tố chọn, quá:

Phương thức .val () chủ yếu được sử dụng để lấy các giá trị của các phần tử biểu mẫu như đầu vào, chọn và textarea. Trong trường hợp các phần tử được chọn, nó trả về nullkhi không có tùy chọn nào được chọn và một mảng chứa giá trị của mỗi tùy chọn được chọn khi có ít nhất một và có thể chọn thêm vì có multiplethuộc tính.

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>

Đối với bất cứ ai phát hiện ra rằng câu trả lời tốt nhất không hoạt động.

Thử sử dụng:

  $( "#aioConceptName option:selected" ).attr("value");

Làm việc cho tôi trong các dự án gần đây vì vậy nó là giá trị để xem xét nó.

Chỉ cần điều này sẽ làm việc:

var conceptName = $('#aioConceptName').val();

Thẳng về phía trước và khá dễ dàng:

Thả xuống của bạn

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Mã Jquery để lấy giá trị đã chọn

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});

Bạn có thể thử gỡ lỗi theo cách này:

console.log($('#aioConceptName option:selected').val())

Để lấy giá trị của thẻ được chọn:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

Và nếu bạn muốn nhận văn bản, hãy sử dụng mã này:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

Ví dụ:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

Nếu bạn muốn lấy thuộc tính 'value' thay vì nút văn bản, điều này sẽ phù hợp với bạn:

var conceptName = $('#aioConceptName').find(":selected").attr('value');

cố gắng lên cái này

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

Hãy tưởng tượng DDL là một mảng với các chỉ mục, bạn đang chọn một chỉ mục. Chọn một cái mà bạn muốn đặt nó với JS của bạn.

Tôi hy vọng điều này cũng giúp hiểu rõ hơn và giúp thử điều này dưới đây,

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

để biết thêm chi tiết xin vui lòng http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribution-USE-jquery/

Bạn có thể dùng $("#drpList").val();

để tìm nạp một lựa chọn với cùng một lớp = tên bạn có thể làm điều này, để kiểm tra xem một tùy chọn chọn có được chọn không.

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});

Tôi có cùng một vấn đề và tôi đã tìm ra lý do tại sao nó không hoạt động trong trường hợp của tôi
Trang html được chia thành các đoạn html khác nhau và tôi thấy rằng tôi có một trường đầu vào khác mang cùng Id của selectnó, khiến val()cho nó luôn trống
Tôi hy vọng điều này sẽ tiết kiệm trong ngày cho bất cứ ai có vấn đề tương tự.

để sử dụng $ ("# id"). val, Bạn nên thêm một giá trị vào tùy chọn như thế này:

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

khác, bạn có thể sử dụng

   $("#aioConceptName").find(':selected').text();

Tôi muốn giúp ..

Đây là giải pháp đơn giản cho vấn đề này.

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

Có lẽ đặt cược tốt nhất của bạn với loại kịch bản này là sử dụng phương thức thay đổi của jQuery để tìm giá trị hiện được chọn, như vậy:

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

Tôi thích phương pháp này vì sau đó bạn có thể thực hiện các chức năng cho từng tùy chọn đã chọn trong một trường đã chọn.

Mong rằng sẽ giúp!

Thông thường, bạn không chỉ cần nhận được giá trị đã chọn mà còn chạy một số hành động. Vậy tại sao không tránh tất cả các phép thuật jQuery và chỉ chuyển giá trị được chọn làm đối số cho lệnh gọi hành động?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>

Bạn có thể chọn sử dụng tùy chọn được chọn chính xác: Dưới đây sẽ cung cấp cho bên trong

$("select#aioConceptName > option:selected").text()

Trong khi dưới đây sẽ cung cấp cho bạn giá trị.

$("select#aioConceptName > option:selected").val()