jQuery untuk mengambil dan mengatur nilai opsi yang dipilih dari elemen pilih html

126

Saya mencoba untuk mengambil dan mengatur nilai yang dipilih dari elemen pilih (daftar turun bawah) dengan jQuery.

untuk retvel saya sudah mencoba $("#myId").find(':selected').val(), $("#myId").val()tetapi juga tetapi keduanya kembali tidak terdefinisi.

Setiap wawasan tentang masalah ini akan sangat dihargai.

jquery ErnieStings
sumber
jika Anda menggunakan .net asp, ID mereka mungkin tidak sama sekali diberikan!
Rigobert Song

Jawaban:

154

Cara Anda memilikinya benar saat ini. Entah id pilih tidak apa yang Anda katakan atau Anda memiliki beberapa masalah dalam dom.

Periksa Id elemen dan juga periksa validasi markup Anda di sini di W3c.

Tanpa dom yang valid, jQuery tidak dapat bekerja dengan benar dengan pemilih.

Jika id benar dan dom Anda divalidasi maka yang berikut ini berlaku:

Untuk Membaca Pilih Nilai Opsi

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

Untuk Menetapkan Nilai Pilihan Pilih

$('#selectId').val('newValue');

Untuk Membaca Teks yang Dipilih

$('#selectId>option:selected').text();
kotak merah
sumber
@ Html.DropDownList ("CoinTypes", (SelectList) ViewBag.RequiredLevel, {@class = "kontrol-bentuk" baru, @ style = "tinggi: 21px; margin-top: 5px;"}) tetapi $ ('# CoinTypes ') .val (@ ViewBag.CoinType); tidak memilih
Nithin Paul
@NithinPaul bukan komentar benar-benar, ajukan pertanyaan yang menunjukkan html sehingga seseorang benar-benar dapat mencoba dan mencari tahu apa yang salah. Tidak yakin bagaimana Anda dapat mengharapkan seseorang untuk mengatasinya dari beberapa format web / mvc!
redsquare
248

untuk mendapatkan / mengatur propertiIndex yang dipilih aktual dari penggunaan elemen pilih: 

$("#select-id").prop("selectedIndex");

$("#select-id").prop("selectedIndex",1);
pmko
sumber
19
Penting untuk dicatat bahwa fitur prop () diimplementasikan dalam versi 1.6 sehingga versi sebelumnya tidak memiliki fungsi ini.
RobB
18
Saya suka jawaban ini karena sebenarnya menjawab pertanyaan mengakses indeks, bukan hanya nilainya.
Pablo Diaz
4
ya. Saya pikir itu adalah pertanyaan awal.
Jack Holt
Anda mungkin juga bisa menggunakan attr dengan sintaks yang sama dan tidak apa-apa.
Yitzhak
7
@ M.YitzhakSamuel .attr()dan .prop()tidak sama. Ini akan berfungsi dalam kasus tertentu di mana atribut juga merupakan properti, misalnya .attr('id')sama dengan .prop('id'). Dalam hal ini, .prop('selectedIndex')sama dengan .get(0).selectedIndex.
WynandB
7

$('#myId').val() harus melakukannya, gagal kalau saya akan mencoba:

$('#myId option:selected').val()
karim79
sumber
4

Saat mengatur dengan JQM, jangan lupa untuk memperbarui UI:

$('#selectId').val('newValue').selectmenu('refresh', true);
Jasper Giscombe
sumber
Terima kasih untuk nugget ini - bertanya-tanya mengapa nilai baru tidak muncul di layar setelah mengubahIndex yang dipilih dengan $ ("# slot-choice"). Prop ("selectedIndex", n).
Samik R
3

$("#myId").val()harus bekerja jika myidid elemen pilih!

Ini akan mengatur item yang dipilih: $("#myId").val('VALUE');

Rigobert Song
sumber
1

Misalkan Anda telah membuat daftar Drop Down menggunakan tag SELECT seperti sebagai berikut,

<select id="Country">

Sekarang jika Anda ingin melihat berapa nilai yang dipilih dari drop-down menggunakan JQuery, cukup masukkan baris berikut untuk mengambil nilai itu ..

var result= $("#Country option:selected").text();

itu akan bekerja dengan baik.

JaySing
sumber
0

Aku tahu ini sudah tua tapi aku hanya punya waktu bersama Razor, tidak bisa membuatnya bekerja tidak peduli seberapa keras aku berusaha. Tetap kembali sebagai "tidak terdefinisi" tidak masalah jika saya menggunakan "teks" atau "html" untuk atribut. Akhirnya saya menambahkan atribut "data-value" ke opsi dan bunyinya baik-baik saja.

 <option value="1" data-value="MyText">MyText</option>

 var DisplayText = $(this).find("option:selected").attr("data-value");
Darkloki
sumber
0

$ ("opsi #myId: terpilih") .text (); akan memberi Anda teks yang Anda pilih di elemen tarik turun. dengan cara apa pun Anda dapat mengubahnya ke .val (); untuk mendapatkan nilai itu. periksa kode di bawah ini

<select id="myId">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>`
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>
Wikum W
sumber
-1

Coba ini

$('#your_select_element_id').val('your_value').attr().add('selected');
Syed Nazir Hussain
sumber