CODEWITHSUNDEEP
javascriptjquery
pr0digy
pr0digy

Reputation: 72

show div based on drop down selection

Here's what I have:

<html>
<head>
<script type="text/javascript">
      $(document).ready(function(){
            $('.formbox').hide();
            $('#dropdown').change(function() {
              $('.formbox').hide();
              for(i=1;i<=$(this).val();i++){
                     $('#witness' + i).show();
              }
            });
          });
</script>
</head>
<body>
<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="witness1" class="formbox">stuff</div>
          <div id="witness2" class="formbox">stuff</div>
          <div id="witness3" class="formbox">stuff</div>
          <div id="witness4" class="formbox">stuff</div>
          <div id="witness5" class="formbox">stuff</div>
          <div id="witness6" class="formbox">stuff</div>
          <div id="witness7" class="formbox">stuff</div>
          <div id="witness8" class="formbox">stuff</div>

        </td>
        </tr>
        </table>
</body>

What I want is when you select option 1, you see the witness1 div. When you select option 2, you see both witness1 and witness2. When you select option 3, you see witness1, witness2 and witness 3...and so on.

Here is a live example:

http://pr0digy.me/witness.html

Any help would be greatly appreciated! Thanks

Upvotes: 0

Views: 130

Answers (1)

Fabien Warniez
Fabien Warniez

Reputation: 2741

You forgot to include jQuery. You need it to use $.

Upvotes: 2

Related Questions