jquery - 使用选择显示/隐藏多个 div

Question

目前的代码，基本上显示了一个基于选择元素的 div。

<script type="text/javascript">
      $(document).ready(function(){
        $('.formbox').hide();
        $('#dropdown').change(function() {
          $('.formbox').hide();
          $('#workshop' + $(this).val()).show();
        });
      });
</script>
<select id="dropdown" name="dropdown" value="{{course}}">
          <option value="0">0</option>
          <option value="1">1</option> 
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
        </select>
      </label>
      <hr>
      <table>
        <tr>
        <td>

          <div id="workshop1" class="formbox">stuff</div>
          <div id="workshop2" class="formbox">stuff</div>
          <div id="workshop3" class="formbox">stuff</div>
          <div id="workshop4" class="formbox">stuff</div> etc

我想要的是当下拉菜单选择 2 时它同时显示 div“workshop1”和workshop2”选择 3 将显示“workshop1”和workshop2”和“workshop3”等等，..所以选择 8 将显示所有车间 div

Answer 1

使用循环：

for (var i=1; i <= $(this).val(); i++) {
  $('#workshop' + i).show();
}

或者，如果 div 是有序的，您可以使用.slice。

$('.formbox').slice(0, $(this).val()).show();

Answer 2

你会想要改变这个：$('#workshop' + $(this).val()).show();

至

var count = $(this).val();
for( var i = 1; i <= count; i++ ){
 $('#workshop' + i).show();
}

Answer 3

尝试这个

 $(document).ready(function(){
            $('.formbox').hide();
            $('#dropdown').change(function() {
              $('.formbox').hide();
              for(i=1;i<=$(this).val();i++){
                     $('#workshop' + i).show();
              }
            });
          });

Answer 4

或者：

       $('#dropdown').change(function(i,v) {
          $('.formbox').hide();
            $('.formbox:nth-child(1n+'+(parseInt($(this).val())+1)+')').show(); 
        });