Pemilih mana yang saya perlukan untuk memilih opsi berdasarkan teksnya?

207

Saya perlu memeriksa apakah a <select> memiliki opsi yang teksnya sama dengan nilai tertentu.

Misalnya, jika ada <option value="123">abc</option> , saya akan mencari "abc".

Apakah ada pemilih untuk melakukan ini?

Saya mencari sesuatu yang mirip $('#select option[value="123"]');tetapi untuk teks.

Hailwood
sumber
Hmm ... hasjawaban dalam bahasa Slaks berguna, tetapi poin dalam jawaban Floyds juga bagus ... Saya tidak tahu harus menerima apa.
Hailwood
juga, apakah ini sensitif? (Saya mencari case-insensitivity dan selalu dapat dikonversi menjadi lebih rendah
Hailwood
1
Saya menggunakan fungsi inti JavaScript .toLowerCase () dan membandingkan, jika case-insensitivity diperlukan. Juga, terima sebagai jawaban yang paling berguna untuk pertanyaan yang Anda ajukan. :)
Hari Pachuveetil
itu tidak berfungsi untuk dropdown memiliki multiselect API ?? Saya mencoba semua solusi yang mungkin tetapi tidak berhasil. Saya menggunakan API dropdowm multiselect eric hynd. Adakah yang bisa mengatasi masalah ini?
Chaitanya Chandurkar

Jawaban:

320

Ini bisa membantu:

$('#test').find('option[text="B"]').val();

Demo biola

Ini akan memberi Anda opsi dengan teks Bdan bukan yang memiliki teks yang berisi B. Semoga ini membantu

Untuk versi terbaru dari jQuery di atas tidak berfungsi. Seperti yang dikomentari oleh Quandary di bawah ini, inilah yang berfungsi untuk jQuery 1.9.1:

$('#test option').filter(function () { return $(this).html() == "B"; }).val();

Biola diperbarui

Hari Pachuveetil
sumber
1
ini tidak berfungsi dengan versi jquery terbaru (jika Anda menghapus 'value =' dari <option>)
KevinDeus
27
@KevinDeus: Kenapa downvote !? Jawabannya adalah untuk versi jQuery!
Hari Pachuveetil
11
Sebagai gantinya, gunakan filter $ ('# test option'). (Function () {return $ (this) .html () == "B";}). Val ();
Stefan Steiger
84
@Quandary Still, itu bukan alasan yang sah untuk memilih jawaban ketika komentar singkat sudah cukup. Atau apakah Anda mengharapkan dia untuk menguji ulang semua jawabannya untuk setiap rilis baru jQuery?
WynandB
2
Saya pikir downvote disebabkan oleh fakta bahwa contoh di atas hanya menemukan nilai yang dipilih, dan tidak menetapkan nilai yang dipilih.
nivs1978
133

Anda dapat menggunakan :contains()pemilih untuk memilih elemen yang berisi teks tertentu.
Sebagai contoh:

$('#mySelect option:contains(abc)')

Untuk memeriksa apakah <select>elemen yang diberikan memiliki opsi seperti itu, gunakan .has()metode ini :

if (mySelect.has('option:contains(abc)').length)

Untuk menemukan semua <select>yang mengandung opsi seperti itu, gunakan :has()pemilih :

$('select:has(option:contains(abc))')
Slaks
sumber
3
:containsbukan definitif sekarang, kan?
Hari Pachuveetil
Apa masalah sebenarnya dengan isi?
Ogier Schelvis
bagaimana Anda melakukan ini dengan hanya opsi yang dipilih?
toddmo
Bukankah ini juga mengambil opsi 123abcdef?
Teepeemm
@ Teemeemm Ya, itulah perbedaan antara dua jawaban teratas. Pemeriksaan hanya atas mengembalikan opsi dengan hanya teks tertentu, yang ini mengembalikan opsi yang berisi, tetapi tidak hanya, teks tertentu. Yang, kebetulan, adalah apa yang sebenarnya saya butuhkan saat ini, jadi saya sangat senang mempostingnya.
Lee A.
30

Tidak ada saran sebelumnya yang bekerja untuk saya di jQuery 1.7.2 karena saya mencoba untuk mengatur indeks daftar yang dipilih berdasarkan nilai dari kotak teks, dan beberapa nilai teks terkandung dalam beberapa opsi. Saya akhirnya menggunakan yang berikut ini:

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).attr('selected', 'selected');
        return false;
    }
    return true;
});
C. Hilarius
sumber
1
Saya pikir ini adalah jawaban terbaik karena sebenarnya mengembalikan hasil yang benar. Tetapi saya tidak bisa tidak berpikir bahwa menghilangkan containssama sekali mungkin sebenarnya mempercepat.
styfle
Ini bekerja untuk saya, tetapi dalam skenario saya, saya dapat mengklik edit pada kisi beberapa kali sehingga harus menghapus yang dipilih yang dikaitkan ketika tidak ada kecocokan jika tidak maka opsi pertama yang dipilih akan tetap untuk pengeditan berikutnya. else {$ (this) .attr ('selected', ''); return false; }
esp
Solusi ini bekerja untuk saya tetapi alih-alih mengatur atribut opsi, untuk benar-benar mengubah menu pilih yang perlu saya lakukan: $(this).parent().val($(this).val()); Anda mungkin bisa melakukan keduanya, tetapi bagi saya pengaturan hanya orangtua yang val()melakukan trik.
billynoah
20

Saya menghadapi masalah yang sama di bawah ini adalah kode kerjanya:

$("#test option").filter(function() {
    return $(this).text() =='Ford';
}).prop("selected", true);

Demo: http://jsfiddle.net/YRBrp/83/

Jaydeep Shil
sumber
15

Ini bekerja untuk saya: $("#test").find("option:contains('abc')");

Phillip Dennis
sumber
3
Anda harus menambahkan penjelasan mengapa itu bekerja juga.
Hannes Johansson
@ HannesJohansson Atau dia setidaknya harus menjelaskan bagaimana itu berbeda dari atau menambahkan sesuatu yang baru ke jawaban SLaks yang hampir lima tahun lebih tua. ; ^)
ruffin
4
Pastikan Anda menyadari bahwa ini juga akan menemukan opsi ini: <option> abcd </option>.
Charles
Terima kasih ini sudah pasti benar dan apa yang dilewatkan semua orang adalah menambahkan .attr ('value'); sampai akhir. Ini adalah cara termudah untuk benar-benar mendapatkan nilai untuk digunakan secara dinamis! Jadi kode lengkapnya harus seperti ini. $("#testselect").find("option:contains('option-text')").attr('value'); dengan cara itu Anda bisa menggunakan acara seperti .click()ingin mengubah pengaturan.
ChrisKsag
12

Ini adalah metode terbaik untuk memilih teks di dropdownlist.

$("#dropdownid option:contains(your selected text)").attr('selected', true);
sreejesh
sumber
3
Seperti dengan jawaban yang serupa, ini akan menemukan opsi dengan this is your selected text plus more.
Teepeemm
4

Saya mencoba beberapa dari hal-hal ini sampai saya dapat menggunakannya di Firefox dan IE. Inilah yang saya pikirkan.

$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());

cara lain untuk menulisnya dalam fasion yang lebih mudah dibaca:

var valofText = $("#my-Select" + " option").filter(function() {
    return this.text == myText
}).val();
$(ElementID).val(valofText);

Kodesemu:

$("#my-Select").val( getValOfText( myText ) );
pengguna2561852
sumber
Masuk akal dengan versi terbaru jQuery
Fr0zenFyr
Apa gunanya "#my-Select" + " option"? Kenapa tidak adil "#my-Select option"?
Teepeemm
3

Gunakan mengikuti

$('#select option:contains(ABC)').val();
Dadaso Zanzane
sumber
1
kode yang Anda berikan dapat menyelesaikan masalah tetapi tambahkan deskripsi singkat tentang bagaimana ini menyelesaikan masalah. Selamat datang di Stack Overflow, disarankan membaca Cara Menjawab .
Dan Beaulieu
3
jika ada beberapa opsi: ABC, ABCD, ABCDEF, lalu?
hungndv
1

Ini akan bekerja di jQuery 1.6 (perhatikan titik dua sebelum braket pembuka), tetapi gagal pada rilis yang lebih baru (1,10 pada saat itu).

$('#mySelect option:[text=abc]")
Bartosz Firyn
sumber
5
Menarik tapi sayangnya sepertinya tidak berhasil (jQuery 1.10.2).
WynandB
Anda ingin memasukkan sesuatu seperti itu $("#mySelect option").filter(function() { return this.text == "abc"; });akan bekerja dengan versi terbaru dari jQuery .. Atau mungkin cara lain yang Anda sukai untuk digunakan ..
Fr0zenFyr
1

Untuk versi jquery 1.10.2 di bawah ini berfungsi untuk saya

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });
Mir Gulam Sarwar
sumber
1

Ini bekerja untuk saya

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');
Carlos Castañeda
sumber
0

Ini bekerja untuk saya:

var result = $('#SubjectID option')
            .filter(function () 
             { return $(this).html() == "English"; }).val();

The resultvariabel akan mengembalikan indeks dari nilai teks yang cocok. Sekarang saya hanya akan mengaturnya menggunakan indeks itu:

$('#SubjectID').val(result);
Willy David Jr
sumber
-1

Entah Anda beralih melalui opsi, atau menempatkan teks yang sama di dalam atribut opsi lain dan pilih dengan itu.

dekomote
sumber
-1

Ini juga akan berfungsi.

$ ('# test'). find ("opsi pilih: berisi ('B')"). filter (": terpilih");

Tjcool
sumber
2
Ini juga akan mengambil opsi ABC.
Teepeemm
-1

Seperti dijelaskan dalam jawaban ini , Anda dapat dengan mudah membuat pemilih sendiri untuk hasText. Ini memungkinkan Anda menemukan opsi dengan$('#test').find('option:hastText("B")').val();

Inilah metode hasText yang saya tambahkan:

 if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }
wbdarby
sumber
-2

Ini bekerja untuk saya

var options = $(dropdown).find('option');
var targetOption = $(options).filter(
function () { return $(this).html() == value; });

console.log($(targetOption).val());

Terima kasih untuk semua posting.

jayson.centeno
sumber