Question

代码当前，基本上显示一个基于select元素的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将显示所有研讨会divs

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

使用select显示/隐藏多个div

4 个答案: