Question

Code currently, basically shows one div based on select element.

<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

What i would like is when the dropdown chooses 2 it shows both the div “workshop1″ and workshop2” choose 3 will show “workshop1″ and workshop2” and “workshop3” and so on,.. so choosing 8 will show all the workshop divs

Answer 1

Try this

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