jquery - selectを使用して複数のdivを表示/非表示にする

Question

現在のコードでは、基本的にselect要素に基づいて1つの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(); 
        });