Dapatkan opsi yang dipilih dari elemen pilih


93

Saya mencoba untuk mendapatkan opsi yang dipilih dari dropdown dan mengisi item lain dengan teks itu, sebagai berikut. IE sedang menggonggong dan tidak berfungsi di Firefox:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

Apa yang saya lakukan salah?

Jawaban:


187

Ini versi singkatnya:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79 membuat tangkapan yang bagus, menilai dari nama elemen Anda txtEntry2mungkin kotak teks, jika itu jenis masukan apa pun, Anda harus menggunakan .val()sebagai gantinya atau .text()seperti ini:

  $('#txtEntry2').val($(this).find(":selected").text());

Untuk pertanyaan "apa yang salah?" bagian dari pertanyaan: .text()tidak mengambil selektor, ia mengambil teks yang Anda inginkan, atau tidak ada untuk mengembalikan teks yang sudah ada di sana. Jadi Anda perlu mengambil teks yang Anda inginkan, lalu memasukkannya ke dalam .text(string)metode pada objek yang ingin Anda atur, seperti yang saya miliki di atas.


7
Jika txtEntry2berupa input teks, OP perlu digunakan val().
karim79

@ Karim79 - Poin yang bagus, dengan nama elemen itu mungkin, memperbarui.
Nick Craver

ya, dengan mengubah .text menjadi .val dan mengambil teks secara berbeda, semuanya berjalan lancar. Terima kasih kawan
Matt

Anda baru saja menyelamatkan saya dari menjadi gila secara resmi!
nathanchere

15

Coba ini:

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});

8

Berikut adalah versi yang lebih pendek yang juga berfungsi:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

TypeError yang tidak tertangkap: Object # <HTMLSelectElement> tidak memiliki metode 'val'
DoodleKana

1
this.valueakan memperbaikinya.
Kris Selbekk

4

Dengan lebih sedikit jQuery:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value adalah JavaScript biasa.

(Sumber: SelfHTML Jerman )


2

Coba kode berikut

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});

2

Untuk mengetahui jumlah elemen yang dipilih digunakan

$("select option:selected").length

Untuk mendapatkan nilai dari semua elemen yang dipilih digunakan

    var str = "";
  $("select option:selected").each(function () {
        str += $(this).text() + " ";
      });


1

Bagian pertama adalah mendapatkan elemen dari menu drop down yang mungkin terlihat seperti ini:

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

Untuk menangkap melalui jQuery Anda dapat melakukan sesuatu seperti ini:

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

Setelah Anda menyimpan nilai dalam variabel Anda, langkah selanjutnya adalah mengirim informasi yang disimpan dalam variabel ke bidang formulir atau elemen HTML yang Anda pilih. Ini mungkin p div atau elemen kustom.

yaitu <p></p> OR <div></div>

Anda akan menggunakan:

$ ('p'). html (iterasi); ATAU $ ('div'). Html (iterations);

Jika Anda ingin mengisi bidang teks seperti:

<input type="text" name="textform" id="textform"></input>

Anda akan menggunakan:

$ ('# textform'). text = iterasi;

Tentu saja Anda dapat melakukan semua hal di atas dengan langkah-langkah yang lebih sedikit, saya hanya percaya ini membantu orang untuk belajar ketika Anda memecah semuanya menjadi langkah-langkah yang mudah dipahami ... Semoga ini bisa membantu!


1

Menggunakan properti selectedOptions (HTML5) Anda bisa mendapatkan opsi yang dipilih

document.getElementbyId("id").selectedOptions; 

Dengan JQuery dapat dicapai dengan melakukan ini

$("#id")[0].selectedOptions; 

atau

$("#id").prop("selectedOptions");

Properti berisi larik HTMLCollection yang serupa dengan opsi yang dipilih ini

[<option value=​"1">​ABC</option>]

atau beberapa pilihan

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]

0

Di atas akan bekerja dengan sangat baik, tetapi tampaknya Anda melewatkan typecast jQuery untuk teks dropdown. Selain itu, sebaiknya gunakan .val()untuk menyetel teks untuk elemen jenis teks masukan. Dengan perubahan ini, kode akan terlihat seperti berikut:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

0

jika Anda sudah memiliki ini dan menggunakan jquery ini akan menjadi jawaban Anda:

$ ($ (ini) [0] .selectedOptions [0]). teks ()


0

Diberikan HTML ini:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Pilih berdasarkan deskripsi untuk jQuery v1.6 +:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.