값이 JQuery로 선택 목록에 있는지 확인하십시오.

112

JQuery를 사용하여 값이 드롭 다운 목록에 속하는지 여부를 어떻게 확인할 수 있습니까?

drop-down-menu jquery-selectors

— user271507
소스

180

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

옵션의 값이 Javascript를 통해 설정된 경우 작동하지 않습니다. 이 경우 다음을 수행 할 수 있습니다.

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

— Lachlan Roche
소스

8

명시적인 두 번째 접근 방식은 ]및`\`를 포함한 모든 문자를 포함하는 옵션 값을 허용하므로 더 안전합니다 . 적절한 CSS 이스케이프를 수행하지 않고 원시 텍스트에서 선택기 문자열을 빌드하지 마십시오.

— bobince

8

왜 return false?

— Grant Birchmeier 2013

14

반환 false는 .each 루프를 중단 / 종료하는 데 사용됩니다.

— Angel

다음 논리를 사용하여 JavaScript로 새 옵션을 만드는 경우 : $ ( '# select-box'). append ($ ( '<option value = "'+ value + '">'+ text + '</ option>')) ; (또는 당연히 수다스러운 스타일로) 첫 번째 예제가 작동합니다 (반복 할 필요가 없음).

— Lukas Jelinek

1

첫 번째 코드 스 니펫이 작동하지 않는 경우를 찾을 수없는 것 같습니다. 새 옵션을 추가하고 jQuery의 val () 함수를 사용하여 기존 옵션의 값을 설정해 보았습니다. 두 경우 모두 첫 번째 코드 조각이 여전히 작동했습니다. 어떤 경우에 실패할까요?

— dallin

17

여러분 (또는 다른 사람)이 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;
   }

— 마르코 데마 이오
소스

왜 그냥 i ++가 아닌가?

— csr-nontol

1

++ i 접두사가 항상 더 빠릅니다 @ csr-nontol

— Alok

11

또 다른 유사한 옵션이 있습니다. 제 경우에는 선택 목록을 작성할 때 다른 상자의 값을 확인하고 있습니다. 비교할 때 정의되지 않은 값으로 계속 실행되었으므로 다음과 같이 수표를 설정했습니다.

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

이 방법이 더 비싸지 않은지 모르겠습니다.

— cam_pdx
소스

8

필터를 사용하지 않는 이유는 무엇입니까?

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

느슨한 비교는 존재> 0이 참이고 존재 == 0이 거짓이기 때문에 작동하므로 그냥 사용할 수 있습니다.

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

또는 결합 :

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

또는 각 선택 드롭 다운에 select-boxes 클래스가있는 경우 값을 포함하는 선택의 jquery 객체를 제공합니다.

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

— keV
소스

이것은 가장 직관적 인 방법입니다.

— Simon

4

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

스 니펫 확장

— 일레인
소스

솔루션에서, 그것은하지 않습니다 theValue하지만 option_number드롭한다. 솔루션이 잘못되었습니다.

— Arsman Ahmad

1

나는 이것이 더 잘 작동하는 오래된 질문이라는 것을 알고 있습니다.

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

이 예에서 볼 수 있듯이 고유 태그 데이터 드롭 다운 이름과 선택한 옵션의 값으로 검색하고 있습니다. 물론 이것들이 작동하는 데 필요하지는 않지만 다른 사람들이 다중 값 등을 검색 할 수 있도록 다른 사람들이 볼 수 있도록 포함했습니다.

— PhanFree
소스