2010-04-23 3 views
2

jquery를 통해 입력 상자를 사용하여 선택 목록을 필터링하는 데 도움이 될지 궁금합니다.입력 상자 및 jquery를 통해 선택 목록 필터링

내 js는 다음과 같지만 작동하지 않습니다. 선택 목록의 옵션이 숨길 수 없기 때문에 이것이라고 생각합니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#inputFilter").change(function() { 
      var filter = $(this).val(); 

      $("#selectList option").each(function() { 
       var match = $(this).text().search(new RegExp(filter, "i")); 
       if (match > 0) { 
        $(this).show(); // Does not work 
       } 
       else 
        $(this).hide(); 
      }); 
     }); 
    }); 
</script> 

여기가

<input id="inputFilter" /> 
<select id="selectList"> 
    <option value="1111" >1111 - London</option> 
    <option value="1112" >1112 - Paris </option> 
</select> 

답변

4

이 시도하십시오

$("#inputFilter").change(function() { 
    var filter = $(this).val(); 
    //alert(filter); 
    $("#selectList option").each(function() { 
     var match = $(this).text().search(new RegExp(filter, "i")); 
     //alert(match); 
     if (match < 0 && $(this).text() != "--select--") {     
      $(this).attr("disabled",true); 
     } 
     else 
      $(this).attr("disabled",false); 

    }); 
}); 

당신은 행동 here에서 볼 수 있습니다.

HTH

+0

이것은 작동하지 않으며 예제가 손상되었습니다. –

0

대신에 숨어의 해제 시도 내 HTML입니다.

$(this).attr('disabled', 'disabled'); 

DOM에서 옵션을 삭제하면됩니다.

+0

어떻게하면 dom에서 삭제할 수 있습니까? 아마 원래 선택 목록의 복제본을 어딘가에 보관해야 할 필요가 있습니까? – zSynopsis

0

text 속성이 없습니다. 이 같은

시도 뭔가 :

<input id="inputFilter" /> 
<select id="selectList"> 
    <option value="1111">1111 - London</option> 
    <option value="1112">1111 - Paris</option> 
</select> 

<script> 
$(document).ready(function() { 
    $("#inputFilter").change(function() { 
     var filter = $(this).val(); 
     $("#selectList option").each(function() { 
     var match = $(this).text().search(new RegExp(filter, 'i')); 

     if (match > 0) { 
      $(this).show(); 
     } 
     else{ 
      $(this).hide(); 
     } 
     }); 
    }); 
}); 
</script> 

편집 : 나는 일도 오해 때문에 내 대답을 편집했다.