jQuery Dapatkan Opsi Terpilih Dari Dropdown

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

kode html

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

Untuk opsi tarik turun, Anda mungkin menginginkan sesuatu seperti ini:

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

Alasannya val()tidak melakukan triknya adalah karena mengklik opsi tidak mengubah nilai dropdown - itu hanya menambah :selectedproperti ke opsi yang dipilih yang merupakan anak dari dropdown.

Tetapkan nilai untuk setiap opsi

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

$('#aioConceptName').val()tidak berfungsi karena .val()mengembalikan valueatribut. Agar berfungsi dengan baik, valueatribut harus ditetapkan pada masing-masing <option>.

Sekarang Anda dapat memanggil $('#aioConceptName').val()alih-alih semua :selectedvoodoo ini disarankan oleh orang lain.

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

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

atau secara umum:

$('#id :pseudoclass')

Ini menghemat panggilan jQuery tambahan, memilih semuanya dalam satu kesempatan, dan lebih jelas (pendapat saya).

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();

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 PossessWithin , Jawaban saya hanya menjawab pertanyaan: Cara memilih "Opsi" yang dipilih.

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

Sudahkah Anda mempertimbangkan untuk menggunakan javascript lama biasa?

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

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

Lihat juga Mendapatkan opsi teks / nilai dengan JavaScript

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

Membaca nilai (bukan teks) dari pilih:

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

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

SEBUAH

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

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

B

Pengguna dapat melihat opsi di tarik turun tetapi semuanya dinonaktifkan:

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

Dalam hal ini, $("#Status").val() hanya akan berfungsi untuk versi jQuery yang lebih kecil dari 1.9.0. Semua varian lain akan berfungsi.

Bagaimana cara memperbarui pilih yang dinonaktifkan?

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

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

Dalam beberapa kasus, Anda mungkin harus memecat acara:

$("#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>

Anda harus menggunakan sintaks ini:

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

Jadi coba Kode ini:

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

Anda dapat menguji di Fiddle: http://jsfiddle.net/PJT6r/9/

lihat tentang jawaban ini di posting ini

Menggunakan jQuery, cukup tambahkan changeacara dan dapatkan nilai atau teks yang dipilih dalam penangan 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'))
});

Gunakan jQuery.val()fungsi untuk elemen tertentu juga:

Metode .val () terutama digunakan untuk mendapatkan nilai-nilai elemen bentuk seperti input, pilih dan textarea. Dalam kasus elemen pilih, ia kembali nullketika tidak ada opsi yang dipilih dan sebuah array yang berisi nilai dari setiap opsi yang dipilih ketika ada setidaknya satu dan dimungkinkan untuk memilih lebih banyak karena multipleatributnya ada.

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

Bagi siapa pun yang mengetahui bahwa jawaban terbaik tidak berhasil.

Coba gunakan:

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

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

Ini seharusnya bekerja:

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

Lurus ke depan dan cukup mudah:

Dropdown Anda

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

Kode jquery untuk mendapatkan nilai yang dipilih

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

Anda dapat mencoba men-debug dengan cara ini:

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

Untuk mendapatkan nilai tag yang dipilih:

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

Dan jika Anda ingin mendapatkan teks, gunakan kode ini:

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

Sebagai contoh:

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

Jika Anda ingin mengambil atribut 'nilai' alih-alih simpul teks, ini akan bekerja untuk Anda:

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

coba yang ini

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

Bayangkan DDL sebagai array dengan indeks, Anda memilih satu indeks. Pilih yang ingin Anda atur dengan JS Anda.

Saya harap ini juga membantu untuk memahami dengan lebih baik dan membantu mencoba ini di bawah,

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

untuk lebih jelasnya silakan http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

Kamu bisa menggunakan $("#drpList").val();

untuk mengambil pilih dengan kelas yang sama = nama Anda bisa melakukan ini, untuk memeriksa apakah opsi pilih dipilih.

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

Saya memiliki masalah yang sama dan saya mencari tahu mengapa itu tidak bekerja pada kasus saya
. Halaman html dibagi menjadi beberapa fragmen html dan saya menemukan bahwa saya memiliki bidang input lain yang membawa ID yang sama select, yang menyebabkan val()selalu kosong.
Saya harap ini menghemat hari bagi siapa saja yang memiliki masalah serupa.

untuk menggunakan $ ("# id"). val, Anda harus menambahkan nilai ke opsi seperti ini:

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

lain, Anda bisa menggunakan

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

Saya berharap itu membantu ..

Inilah solusi sederhana untuk masalah ini.

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

Mungkin taruhan terbaik Anda dengan skenario semacam ini adalah menggunakan metode perubahan jQuery untuk menemukan nilai yang saat ini dipilih, seperti:

$('#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

});

Saya lebih suka metode ini karena Anda kemudian dapat melakukan fungsi untuk setiap opsi yang dipilih di bidang pilih yang diberikan.

Semoga itu bisa membantu!

Biasanya Anda tidak hanya perlu mendapatkan nilai yang dipilih, tetapi juga menjalankan beberapa tindakan. Jadi mengapa tidak menghindari semua sihir jQuery dan hanya memberikan nilai yang dipilih sebagai argumen untuk panggilan aksi?

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

Anda dapat memilih menggunakan opsi yang dipilih tepat: Di bawah ini akan memberikan innerText

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

Sementara di bawah ini akan memberi Anda nilai.

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