Periksa apakah nilai dalam daftar pilih dengan JQuery

112

Bagaimana saya, dengan menggunakan JQuery, memeriksa apakah suatu nilai termasuk dalam daftar dropdown atau tidak?

drop-down-menu jquery-selectors pengguna271507
sumber

Jawaban:

180

Gunakan Attribute Equals Selector

var thevalue = 'foo';
var exists = 0 != $('#select-box option[value='+thevalue+']').length;

Jika nilai opsi ditetapkan melalui Javascript, itu tidak akan berhasil. Dalam hal ini kita dapat melakukan hal berikut:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});
Lachlan Roche
sumber
8
Pendekatan eksplisit kedua juga lebih aman karena memungkinkan nilai opsi yang berisi karakter apa pun, termasuk ]dan `\`. Hindari membuat string pemilih dari teks mentah tanpa melakukan pelolosan CSS yang benar.
bobince
8
Mengapa return false?
Grant Birchmeier
14
Return false digunakan untuk memutuskan / mengakhiri .each loop.
Angel
Jika Anda membuat opsi baru dengan JavaScript menggunakan logika ini: $ ('# select-box'). Append ($ ('<option value = "' + value + '">' + text + '</option>')) ; (atau tentu saja dengan gaya yang lebih banyak bicara), contoh pertama akan berhasil (Anda tidak perlu mengulang).
Lukas Jelinek
1
Sepertinya saya tidak dapat menemukan kasus di mana cuplikan kode pertama tidak berfungsi. Saya telah mencoba menambahkan opsi baru dan mengatur nilai opsi yang ada dengan fungsi val () jQuery. Dalam kedua kasus tersebut, cuplikan kode pertama masih berfungsi. Dalam kasus apa itu gagal?
dallin
17

Untuk berjaga-jaga jika Anda (atau orang lain) tertarik melakukannya tanpa jQuery:

var exists = false;
for(var i = 0, opts = document.getElementById('select-box').options; i < opts.length; ++i)
   if( opts[i].value === 'bar' )
   {
      exists = true; 
      break;
   }
Marco Demaio
sumber
Mengapa tidak hanya i ++?
csr-nontol
1
++ i prefix selalu lebih cepat dari postfix @ csr-nontol
Alok
11

Berikut adalah opsi serupa lainnya. Dalam kasus saya, saya memeriksa nilai di kotak lain saat saya membuat daftar pilihan. Saya terus menemukan nilai yang tidak ditentukan ketika saya akan membandingkan, jadi saya mengatur cek saya seperti ini:

if ( $("#select-box option[value='" + thevalue + "']").val() === undefined) { //do stuff }

Saya tidak tahu apakah pendekatan ini lebih mahal.

cam_pdx
sumber
8

Mengapa tidak menggunakan filter?

var thevalue = 'foo';    
var exists = $('#select-box option').filter(function(){ return $(this).val() == thevalue; }).length;

Perbandingan longgar berfungsi karena ada> 0 benar, ada == 0 salah, jadi Anda bisa menggunakannya

if(exists){
    // it is in the dropdown
}

Atau gabungkan:

if($('#select-box option').filter(function(){ return $(this).val() == thevalue; }).length){
    // found
}

Atau di mana setiap dropdown pilih memiliki kelas kotak-pilih ini akan memberi Anda objek jquery dari pilih yang berisi nilai:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();
keV
sumber
Ini adalah cara yang paling intuitif.
Simon
4 

if(!$('#select-box').find("option:contains('" + thevalue  + "')").length){
//do stuff
}
Luaskan cuplikan

elaine
sumber
Dalam larutan Anda, Hal ini tidak theValuetetapi option_numberdi dropdown. Solusi Anda salah.
Arsman Ahmad
1

Saya tahu ini adalah jenis pertanyaan lama karena yang satu ini bekerja lebih baik.

if(!$('.dropdownName[data-dropdown="' + data["item"][i]["name"] + '"] option[value="'+data['item'][i]['id']+'"]')[0]){
  //Doesn't exist, so it isn't a repeat value being added. Go ahead and append.
  $('.dropdownName[data-dropdown="' + data["item"][i]["name"] + '"]').append(option);
}

Seperti yang Anda lihat dalam contoh ini, saya mencari berdasarkan tag unik nama dropdown data dan nilai opsi yang dipilih. Tentu saja Anda tidak memerlukan ini agar ini berfungsi tetapi saya memasukkannya sehingga orang lain dapat melihat Anda dapat mencari multi nilai, dll.

PhanFree
sumber