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?

Matt
sumber

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.

Nick Craver
sumber
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());
});
Runcing
sumber
8

Berikut adalah versi yang lebih pendek yang juga berfungsi:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });
ThdK
sumber
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 )

koppor
sumber
2

Coba kode berikut

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});
ketan
sumber
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() + " ";
      });
Sandeep Kumar
sumber
1

Ini berhasil untuk saya:

$("#SelectedCountryId_option_selected")[0].textContent
Mpho Makhubele
sumber
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!

HappyCoder
sumber
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> ...]
alejandro
sumber
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());
Amit Dash
sumber
0

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

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

tibi
sumber
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);
Tariq
sumber