JQuery ile değerin seçim listesinde olup olmadığını kontrol edin

112

JQuery kullanarak, bir değerin açılır listeye ait olup olmadığını nasıl kontrol edebilirim?

drop-down-menu jquery-selectors

— user271507
kaynak

180

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

Seçeneğin değeri Javascript aracılığıyla ayarlanmışsa, bu işe yaramaz. Bu durumda aşağıdakileri yapabiliriz:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});

— Lachlan Roche
kaynak

8

Açık ikinci yaklaşım, ]ve `\` dahil herhangi bir karakteri içeren seçenek değerlerine izin verdiği için daha güvenlidir . Doğru CSS kaçışını yapmadan ham metinden seçici dizeler oluşturmaktan kaçının.

— bobince

8

Neden return false?

— Grant Birchmeier

14

Dönüş yanlış, her döngüyü kırmak / sonlandırmak için kullanılır.

— Angel

Bu mantığı kullanarak JavaScript ile yeni seçenekler oluşturursanız: $ ('# seçme-kutusu']. Append ($ ('<seçenek değeri = "' + değer + '">' + metin + '</option>')) ; (veya elbette daha konuşkan bir tarzda), ilk örnek işe yarayacaktır (tekrarlamanıza gerek yoktur).

— Lukas Jelinek

1

İlk kod parçacığının çalışmadığı bir durum bulamıyorum. JQuery'nin val () işlevi ile hem yeni bir seçenek eklemeyi hem de mevcut bir seçeneğin değerini ayarlamayı denedim. Her iki durumda da, ilk kod parçacığı hala çalışıyordu. Hangi durumda başarısız olur?

— dallin

17

Siz (veya başka biri) jQuery olmadan yapmakla ilgilenmeniz durumunda:

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
kaynak

Neden sadece i ++ değil?

— csr-nontol

1

++ i öneki her zaman postfix @ csr-nontol'den daha hızlıdır

— Alok

11

İşte benzer bir seçenek daha. Benim durumumda, bir seçim listesi oluştururken başka bir kutudaki değerleri kontrol ediyorum. Karşılaştırdığımda tanımsız değerlerle karşılaşmaya devam ettim, bu yüzden çekimi şu şekilde ayarladım:

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

Bu yaklaşımın daha pahalı olup olmadığını bilmiyorum.

— cam_pdx
kaynak

8

Neden bir filtre kullanmıyorsunuz?

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

Gevşek karşılaştırmalar işe yarar çünkü var> 0 doğrudur, var == 0 yanlıştır, bu nedenle sadece kullanabilirsiniz

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

Veya birleştirin:

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

Veya her seçim açılır listesinin seçim kutuları sınıfına sahip olduğu durumlarda, bu size değeri içeren seçim (ler) in jquery nesnesini verir:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();

— keV
kaynak

Bu en sezgisel yoldur.

— Simon

4

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

Snippet'i genişlet

— elaine
kaynak

Senin çözümde, O değil theValueama option_numberaçılır listede. Çözümün yanlış.

— Arsman Ahmad

1

Bunun biraz eski bir soru olduğunu biliyorum, bu soru daha iyi çalışıyor.

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

Bu örnekte görebileceğiniz gibi, benzersiz etiketler veri açılır adı ve seçilen seçeneğin değerine göre arama yapıyorum. Elbette bunların çalışması için bunlara ihtiyacınız yok ama ben onları dahil ettim ki diğerleri sizi görebilsin, çoklu değerler vb.

— PhanFree
kaynak