Pertanyaan jQuery Dapatkan Pilihan Yang Dipilih Dari Dropdown


Biasanya saya gunakan $("#id").val() untuk mengembalikan nilai opsi yang dipilih, tetapi kali ini tidak berhasil. Tag yang dipilih memiliki id aioConceptName

kode html

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

877
2018-05-18 20:11


asal


Jawaban:


Untuk opsi dropdown Anda mungkin menginginkan sesuatu seperti ini:

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

Alasannya val() tidak melakukan trik ini karena mengklik opsi tidak mengubah nilai dropdown - itu hanya menambahkan :selected properti ke opsi yang dipilih yang merupakan a anak dari dropdown.


1497
2018-05-18 20:14



Atur nilai untuk masing-masing opsi

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

$('#aioConceptName').val() tidak berhasil karena .val() mengembalikan value atribut. Agar berfungsi dengan benar, value atribut harus ditetapkan pada masing-masing <option>.

Sekarang Anda bisa menelepon $('#aioConceptName').val() alih-alih semua ini :selected voodoo disarankan oleh orang lain.


268
2017-10-26 16:50



Saya menemukan pertanyaan ini dan mengembangkan versi yang lebih ringkas dari jawaban Elliot BOnneville:

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

atau secara umum:

$('#id :pseudoclass')

Ini menghemat panggilan jQuery ekstra, memilih semuanya dalam satu potret, dan lebih jelas (menurut saya).


138
2017-11-01 17:16



Coba ini untuk nilai ...

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

atau ini untuk teks ...

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

42
2018-02-27 08:54



Jika Anda berada dalam konteks acara, di jQuery, Anda dapat mengambil elemen opsi yang dipilih menggunakan:
$(this).find('option:selected') seperti ini :

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

Edit

Seperti yang disebutkan oleh MilikDalam, Jawaban saya hanya menjawab pertanyaan: Bagaimana memilih "Opsi" terpilih.

Selanjutnya, untuk mendapatkan nilai opsi, gunakan option.val().


38
2017-07-09 15:30



Sudahkah Anda mempertimbangkan untuk menggunakan javascript lama biasa?

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

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

Lihat juga Mendapatkan teks / nilai opsi dengan JavaScript


28
2018-05-08 18:18



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

17
2017-11-26 23:25



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

10
2018-04-25 01:07



Membaca nilai (bukan teks) pilihan:

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

Bagaimana cara menonaktifkan pilihan?  di kedua varian, nilai dapat diubah menggunakan:

SEBUAH

Pengguna tidak dapat berinteraksi dengan dropdown. Dan dia tidak tahu apa pilihan lain yang mungkin ada.

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

B

Pengguna dapat melihat opsi di tarik-turun tetapi semuanya dinonaktifkan:

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

Pada kasus ini, $("#Status").val()  hanya akan berfungsi untuk versi jQuery lebih kecil dari 1.9.0. Semua varian lainnya akan berfungsi.

Bagaimana cara memperbarui pilihan yang dinonaktifkan?

Dari kode di belakang Anda masih dapat memperbarui nilai dalam pilihan Anda. Ini dinonaktifkan hanya untuk pengguna:

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

Dalam beberapa kasus Anda mungkin perlu memecat acara:

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

9
2018-06-01 15:38



Bagi siapa saja yang menemukan bahwa jawaban terbaik tidak berhasil.

Coba gunakan:

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

Bekerja untuk saya dalam proyek-proyek baru-baru ini sehingga layak untuk melihatnya.


8
2018-01-29 12:37



Menggunakan jQuery, cukup tambahkan a change acara dan dapatkan nilai atau teks yang dipilih dalam handler itu.

Jika Anda membutuhkan teks yang dipilih, silakan gunakan kode ini:

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

Atau jika Anda membutuhkan nilai yang dipilih, silakan gunakan kode ini:

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

8
2017-07-22 10:15