Dapatkan nilai yang dipilih dari item dropdown menggunakan jQuery

443

Bagaimana saya bisa mendapatkan nilai yang dipilih dari kotak dropdown menggunakan jQuery?
Saya mencoba menggunakan

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

dan

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

tetapi keduanya mengembalikan string kosong.

jquery

— shyam
sumber

3

Keduanya harus bekerja. Masalahnya harus di tempat lain (misalnya apakah kode itu dibungkus $(document).ready(...?)

— karim79

4

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

— semut

2

Tidak - $('#dropDownId').val();adalah cara paling ringkas untuk mendapatkan nilai yang dipilih.

— karim79

1

@shyam Anda tidak perlu memilih dalam pernyataan ini karena ID unik untuk dokumen, Anda harus menggunakan nama tag hanya ketika merujuk ke kelas select#dropDownId option:selected,

— sem

kemungkinan duplikat dari Cara mendapatkan indeks tag opsi select->

— Chris Moschini

840

Untuk elemen dom pilih tunggal, untuk mendapatkan nilai yang dipilih saat ini:

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

Untuk mendapatkan teks yang saat ini dipilih:

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

— Peter McG
sumber

11

Anda membutuhkan ruang sebelumnya :selected.

— interjay

53

yang tercepat cara untuk mendapatkan teks opsi yang dipilih adalah:$("#dropDownId").children("option").filter(":selected").text()

— RickardN

3

saya harap Anda telah menghubungkan referensi ke .val()dan.text()

— shareef

8

Richard, kode Anda terlalu panjang ... bisa jauh lebih ringkas untuk dibaca

— PositiveGuy

2

@ JamesM. Lay referensi DOM disimpan dalam variabel? Kemudian gunakanjQuery(domVariable).val()

— Allen Linatoc

57

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

Jika berfungsi dengan baik, lihat contoh ini:

$(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!" />

Luaskan cuplikan

— Nick Reeve
sumber

4

"value" adalah apa yang dilewatkan oleh sebagian besar pembuat kode, sementara mendeklarasikan elemen dan kueri tetap mengembalikan teks

— Asad

Periksa demo di sini freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— Code Spy

22

Coba jQuery ini,

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

atau javascript ini,

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

Jika Anda perlu mengakses nilai dan bukan teks, coba gunakan val()metode alih-alih text().

Lihat tautan biola di bawah ini.

Demo1 | Demo2

— Lucky
sumber

14

coba ini

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

— Kvadiyatar
sumber

OP meminta nilai yang dipilih. Jawaban ini akan mendapatkan konten teks dari drop down. Tidak salah, hanya saja bukan apa yang dia minta.

— Joshua Dance

12

Saya tahu ini adalah posting yang sangat tua dan saya mungkin harus dicambuk karena kebangkitan yang menyedihkan ini, tetapi saya pikir saya akan berbagi beberapa cuplikan JS kecil yang SANGAT membantu yang saya gunakan di setiap aplikasi di gudang senjata saya ...

Jika mengetik:

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

semakin tua, coba tambahkan crumpets kecil ini ke *.jsfile global Anda :

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

dan hanya menulis soval("#selector");atau sotext("#selector");sebagai gantinya! Dapatkan lebih keren dengan menggabungkan keduanya dan mengembalikan objek yang berisi keduanya valuedan text!

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

Ini menghemat banyak waktu berharga bagi saya, terutama pada aplikasi yang berat!

— DevlshOne
sumber

9

Ini akan mengingatkan nilai yang dipilih. Kode JQuery ...

$(document).ready(function () {

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

Kode HTML ...

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

— Uthaiah
sumber

8

ini akan melakukan trik

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

— Singleton
sumber

8

Contoh lain yang diuji:

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

4

Coba ini, ini mendapat nilai:

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

— Ângelo Rigo
sumber

3

Apakah Anda memberikan elemen pilih Anda dengan id?

<select id='dropDownId'> ...

Pernyataan pertama Anda seharusnya berhasil!

— schaechtele
sumber

3

Untuk penggunaan teks yang dipilih:

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

Untuk penggunaan nilai yang dipilih:

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

— mahi
sumber

2

Yang iddihasilkan untuk kontrol drop down Anda htmlakan menjadi dinamis. Jadi gunakan id lengkap $('ct100_<Your control id>').val().Ini akan berhasil.

— VenkeHV
sumber

2

Atau jika Anda akan mencoba:

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

Saya menggunakannya hari ini dan bekerja dengan baik.

— Padat
sumber

2

menggunakan

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

Ini seharusnya bekerja :)

— Namila
sumber

2

Untuk mendapatkan nilai jquery dari drop down, Anda cukup menggunakan fungsi di bawah ini yang baru saja dikirim iddan mendapatkan nilai yang dipilih:

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
sumber

Cara sulit untuk melakukannya, tetapi apa pun berhasil.

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

Luaskan cuplikan

— sakthi sudhan
sumber

1

Saya tahu ini sudah lama tapi saya pikir saya memperbaruinya dengan jawaban yang lebih terkini

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

saya harap ini membantu

— mindmyweb
sumber

1

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

coba ini

— rakesh
sumber

1

gunakan salah satu dari kode ini

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

ATAU

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

— Bipin
sumber

1

Inilah yang berhasil

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

— Shittu Joseph Olugbenga
sumber

1

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

Atau

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

Kode di atas bekerja dengan baik untuk saya

— Stefan Kelchtermans
sumber

1

Anda dapat melakukan ini dengan menggunakan kode berikut.

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

Jika Anda ingin mendapatkan nilai yang dipilih dari opsi daftar `s pilih. Ini akan melakukan triknya.

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

— Dulith De Costa
sumber

0

Anda dapat menggunakan salah satu dari ini:

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

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

            //OR

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

});

— Suresh Burdak
sumber

0

Anda harus seperti ini.

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

— Arthur Salgado
sumber

0

Coba ini:

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

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

— saravanajd
sumber

0

Gunakan metode di bawah ini untuk mendapatkan nilai yang dipilih pada pemuatan halaman:

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

— UTHIRASAMY
sumber

0

Jika Anda memiliki lebih dari satu dropdown, cobalah:

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

— RGriffiths
sumber

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
sumber

Harap sertakan penjelasan tentang bagaimana dan mengapa ini menyelesaikan masalah akan sangat membantu meningkatkan kualitas posting Anda, dan mungkin menghasilkan lebih banyak suara.

— 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 Irahad
sumber

-1

ini seharusnya bekerja untuk Anda

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

— mohamed ruzaik
sumber

Bagaimana jika opsi dropdown Anda ditandai sebagai dipilih secara terprogram (seperti dari permintaan ajax yang mengisi dropdown)? Jika Anda mencoba untuk mendapatkan .val (), Anda akan mendapatkan nol untuk nilainya (meskipun memeriksa sumbernya akan menunjukkan kepada Anda bahwa opsi tersebut memang dipilih)! $ ("opsi myDD: terpilih"). val () akan menghasilkan undefined.

— MC9000