Nhận giá trị được chọn của mục thả xuống bằng jQuery

443

Làm cách nào tôi có thể nhận được giá trị đã chọn của hộp thả xuống bằng jQuery?
Tôi đã thử sử dụng

var value = $('#dropDownId').val();

và

var value = $('select#dropDownId option:selected').val();

nhưng cả hai trả về một chuỗi rỗng.

jquery

— mắc cỡ
nguồn

3

Cả hai nên làm việc. Vấn đề phải ở một nơi khác (ví dụ mã đó được gói trong một $(document).ready(...khối?)

— karim79

4

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

— con kiến

2

Không - $('#dropDownId').val();là cách ngắn gọn nhất để có được giá trị được chọn.

— karim79

1

@shyam bạn không cần chọn trong tuyên bố này vì ID là duy nhất cho tài liệu, bạn chỉ nên sử dụng tên thẻ khi tham chiếu đến các lớp select#dropDownId option:selected,

— ant

bản sao có thể có của Cách lấy Chỉ mục chọn-> thẻ tùy chọn

— Chris Moschini

840

Đối với các phần tử dom chọn duy nhất, để có được giá trị hiện được chọn:

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

Để có được văn bản hiện được chọn:

$('#dropDownId :selected').text();

— Peter McG
nguồn

11

Bạn cần một không gian trước :selected.

— interjay

53

các nhanh nhất cách để nhận được nội dung của phương án chọn là:$("#dropDownId").children("option").filter(":selected").text()

— RickardN

3

tôi ước bạn đã liên kết các tài liệu tham khảo đến .val()và.text()

— shareef

8

Richard, mã của bạn quá dài ... nó có thể ngắn gọn hơn nhiều về khả năng đọc

— positiveGuy

2

@ JamesM.Lay một tham chiếu DOM được lưu trữ trong một biến? Sau đó sử dụngjQuery(domVariable).val()

— Allen Linatoc

57

var value = $('#dropDownId:selected').text()

Nên hoạt động tốt, xem ví dụ này:

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />

Mở rộng đoạn trích

— Nick Reeve
nguồn

4

"Giá trị" là điều mà hầu hết các lập trình viên bỏ lỡ, trong khi khai báo truy vấn phần tử và tiếp tục trả về văn bản thay vào đó

— Asad

Kiểm tra bản demo tại đây freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— Code Spy

22

Hãy thử jQuery này,

$("#ddlid option:selected").text();

hoặc javascript này,

 var selID=document.getElementById("ddlid");
 var text=selID.options[selID.selectedIndex].text;

Nếu bạn cần truy cập giá trị và không phải văn bản thì hãy thử sử dụng val()phương thức thay vì text().

Kiểm tra các liên kết fiddle dưới đây.

Bản trình diễn1 | Bản trình diễn2

— May mắn
nguồn

14

thử cái này

$("#yourDropdown option:selected").text();

— Kvadiyatar
nguồn

OP đang yêu cầu giá trị được chọn. Câu trả lời này sẽ có được nội dung văn bản của thả xuống. Không sai, chỉ là không phải những gì anh đang yêu cầu.

— Vũ điệu Joshua

12

Tôi biết đây là một bài viết cũ khủng khiếp và có lẽ tôi nên bị cuốn vào sự hồi sinh đáng thương này, nhưng tôi nghĩ rằng tôi sẽ chia sẻ một vài đoạn mã RẤT nhỏ hữu ích mà tôi sử dụng trong mọi ứng dụng trong kho vũ khí của mình ...

Nếu gõ ra:

$("#selector option:selected").val() // or
$("#selector option:selected").text()

đang trở nên cũ kỹ, hãy thử thêm các crumpets nhỏ này vào *.jstệp toàn cầu của bạn :

function soval(a) {
    return $('option:selected', a).val();
}
function sotext(a) {
    return $('option:selected', a).text();
}

và chỉ viết soval("#selector");hoặc sotext("#selector");thay vào đó! Nhận thậm chí fancier bằng cách kết hợp cả hai và trả lại một đối tượng có chứa cả valuevà text!

function so(a) {
    my.value = $('option:selected', a).val();
    my.text  = $('option:selected', a).text();
    return my;
}

Nó giúp tôi tiết kiệm rất nhiều thời gian quý báu, đặc biệt là trên các ứng dụng nặng!

— DevlshOne
nguồn

9

Điều này sẽ cảnh báo giá trị được chọn. Mã JQuery ...

$(document).ready(function () {

        $("#myDropDown").change(function (event) {
            alert("You have Selected  :: "+$(this).val());
        });
    });

Mã HTML...

<select id="myDropDown">
        <option>Milk</option>
        <option>Egg</option>
        <option>Bread</option>
        <option>Fruits</option>
    </select>

— Uthaiah
nguồn

8

điều này sẽ làm cho mẹo

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

— Người độc thân
nguồn

8

Một ví dụ khác đã được thử nghiệm:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#bonus').change(function() {
    alert($("#bonus option:selected").text());
  });  
});
</script>
</head>

<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>

— J Slick
nguồn

4

Hãy thử điều này, nó nhận được giá trị:

$('select#myField').find('option:selected').val();

— Rìu
nguồn

3

Bạn đã cung cấp phần tử chọn của bạn với một id?

<select id='dropDownId'> ...

Tuyên bố đầu tiên của bạn nên làm việc!

— schaechtele
nguồn

3

Đối với văn bản đã chọn sử dụng:

value: $('#dropDownId :selected').text();

Đối với giá trị được chọn sử dụng:

value: $('#dropDownId').val();

— soái ca
nguồn

2

Cái idđược tạo cho điều khiển thả xuống của bạn htmlsẽ là cái động. Vì vậy, sử dụng id đầy đủ $('ct100_<Your control id>').val().Nó sẽ hoạt động.

— VenkeHV
nguồn

2

Hoặc nếu bạn muốn thử:

$("#foo").find("select[name=bar]").val();

Tôi đã sử dụng nó ngày hôm nay và nó hoạt động tốt.

— Chất rắn
nguồn

2

sử dụng

$('#dropDownId').find('option:selected').val()

Điều này sẽ làm việc :)

— Namila
nguồn

2

Để có được giá trị jquery từ trình đơn thả xuống, bạn chỉ cần sử dụng hàm bên dưới vừa gửi idvà nhận giá trị đã chọn:

function getValue(id){
    var value = "";
    if($('#'+id)[0]!=undefined && $('#'+id)[0]!=null){
        for(var i=0;i<$('#'+id)[0].length;i++){
            if($('#'+id)[0][i].selected == true){
                if(value != ""){
                    value = value + ", ";
                }
                value = value + $('#'+id)[0][i].innerText;
            }
        }
    }
    return value;
}

— Virendra khade
nguồn

Cách làm khó khăn, nhưng bất cứ điều gì làm việc.

— MC9000

2

	function fundrp(){
	var text_value = $("#drpboxid option:selected").text();  
	console.log(text_value);
	var val_text = $("#drpboxid option:selected").val();  
	console.log(val_text);
	var value_text = $("#drpboxid option:selected").attr("vlaue") ;
	console.log(value_text);
	var get_att_value = $("#drpboxid option:selected").attr("id") 
	console.log(get_att_value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="drpboxid">
	<option id="1_one" vlaue="one">one</option>
	<option id="2_two" vlaue="two">two</option>
	<option id="3_three" vlaue="three">three</option>              
</select>
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>

Mở rộng đoạn trích

— sakthi sudhan
nguồn

1

Tôi biết điều này đã cũ nhưng tôi mặc dù tôi cập nhật điều này với một câu trả lời cập nhật hơn

$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
 alert(prepMin);
});

Tôi hi vọng cái này giúp được

— tâm trí
nguồn

1

$("select[id$=dropDownId]").val()

thử cái này

— rakesh
nguồn

1

sử dụng một trong hai mã này

$('#dropDownId :selected').text();

HOẶC LÀ

$('#dropDownId').text();

— Bipin
nguồn

1

Đây là những gì hoạt động

    var value= $('option:selected', $('#dropDownId')).val();

— Shittu Joseph Olugbenga
nguồn

1

$("#selector <b>></b> option:selected").val()

Hoặc là

$("#selector <b>></b> option:selected").text()

Các mã trên hoạt động tốt cho tôi

— Stefan Kelchtermans
nguồn

1

Bạn có thể làm điều này bằng cách sử dụng mã sau đây.

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

Nếu bạn muốn nhận giá trị được chọn từ các tùy chọn của danh sách chọn. Điều này sẽ làm các mẹo.

$('#dropDownId option:selected').text();

— Dulith De Costa
nguồn

0

Bạn có thể sử dụng bất kỳ trong số này:

$(document).on('change', 'select#dropDownId', function(){

            var value = $('select#dropDownId option:selected').text();

            //OR

            var value = $(this).val();

});

— Suresh Burdak
nguồn

0

Bạn cần phải đặt như thế này.

$('[id$=dropDownId] option:selected').val();

— Arthur Salgado
nguồn

0

Thử cái này:

 $('#dropDownId option').filter(':selected').text();     

 $('#dropDownId option').filter(':selected').val();

— saravanajd
nguồn

0

Sử dụng phương pháp bên dưới để lấy giá trị đã chọn khi tải trang:

$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);`
            });
});

— UTHIRASAMY
nguồn

0

Nếu bạn có nhiều hơn một lần thả xuống, hãy thử:

HTML:

<select id="dropdown1" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>
<select id="dropdown2" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>

JavaScript:

    function myFunction(sel) {
        var selected = sel.value;
    }

— Những người yêu thích
nguồn

0

HTML:

<select class="form-control" id="SecondSelect">
       <option>5<option>
       <option>10<option>
       <option>20<option>
       <option>30<option>
</select>

JavaScript:

var value = $('#SecondSelect')[0].value;

— mahdi hosseini
nguồn

Vui lòng bao gồm một lời giải thích về cách thức và lý do tại sao điều này giải quyết vấn đề thực sự sẽ giúp cải thiện chất lượng bài đăng của bạn và có thể dẫn đến nhiều lượt bình chọn hơn.

— Android

-1

$("#dropDownId").val('2');
var SelectedValue= $("#dropDownId option:selected").text();
$(".ParentClass .select-value").html(SelectedValue);


<p class="inline-large-label button-height ParentClass" >
     <label for="large-label-2" class="label">Country <span style="color: Red;">*</span><small></small></label>
     <asp:DropDownList runat="server" ID="dropDownId " CssClass="select" Width="200px">          
    </asp:DropDownList>
</p>

— Muddassir
nguồn

-1

Điều này sẽ làm việc cho bạn

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });

— mohamed ruzaik
nguồn

Điều gì xảy ra nếu tùy chọn thả xuống của bạn được đánh dấu là đã chọn theo chương trình (như từ yêu cầu ajax cư trú trong danh sách thả xuống)? Nếu bạn cố gắng lấy .val (), bạn sẽ nhận được null cho giá trị (mặc dù việc kiểm tra nguồn sẽ cho bạn thấy rằng tùy chọn thực sự được chọn)! $ ("tùy chọn myDD: đã chọn"). val () sẽ mang lại kết quả không xác định.

— MC9000