입력 값을 기준으로 드롭 다운 메뉴의 옵션 값만 표시

Question

사람 수에 대한 입력란이 있습니다. 이제 주어진 입력에 따라 입력 값을 수용 할 수있는 테이블 만 표시하려고합니다.

<div class="control-group "> 
    <label class="control-label" for="Name">No. of people :</label> 
    <div class="controls"> 
     <input type="text" name="num_of_people" id="num_of_people" required> 
    </div> 
</div> 
<div class="control-group "> 
    <label class="control-label" for="Name"> Select Table :</label> 
    <div class="controls"> 
     <select name="table_id" id="table_id" class="reserv_select"> 
      <option value="">Select</option> 
      <?php foreach ($tables as $table) { ?> 
       <option rel="<?php echo $table->num_of_people ?>" value="<?php echo $table->id ?>"><?php echo $table->table_num ?></option> 
      <?php } ?> 
     </select> 
    </div> 
</div> 

여기서 옵션 값의 rel은 사람 수를 나타냅니다. jQuery를 사용하여 어떻게 달성합니까?

<script type="text/javascript"> 
    $(document).ready(function() { 
     var select = $('#table_id'); 
     var options = select.find('option'); 
     $('#num_of_people').change(function() { 
      var visible = options.filter('[value="' + $(this).val() + '")]').show(); 
      options.not('visible').hide(); 
     }) 
    }) 
</script> 

어떤 도움/제안 정말 도움이 :

나는 다음과 같은 노력했다. 미리 감사드립니다.

Answer 1

이

$('#num_of_people').change(function() { 
     options.hide().filter('[value="' + $(this).val() + '"]').show(); 
    })