title: Hide a div upon option change in select dropdown in HTML using jQuery
body: <p>To get straight to the point here's I want to accomplish. I want to hide a certain DIV when a certain <code>&lt;OPTION&gt;</code> in <code>&lt;SELECT&gt;</code> was selected. </p>
  
  <p>Here's my HTML markup:</p>
  
  <p><strong>THE SELECT</strong> </p>
  
  <pre><code>&lt;select name="cutoffselect" id="cutoff" class="text ui-widget-content ui-corner-all" style="padding-right: 80px;"&gt;
          &lt;option value=""&gt;Choose One&lt;/option&gt;
          &lt;option value="daily"&gt;Daily&lt;/option&gt;
          &lt;option value="weekly"&gt;Weekly&lt;/option&gt;
          &lt;option value="semimonthly"&gt;Semi Monthly&lt;/option&gt;
          &lt;option value="monthly"&gt;Monthly&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>and the DIV I want to hide if DAILY was selected.</p>
  
  <p><strong>THE PERIOD</strong></p>
  
  <pre><code>&lt;div class="input-group-addon" style="width:20%;" title='Filter By' id = "perioddiv"&gt;   
      &lt;!--PERIOD--&gt;
         &lt;label for="period" style="padding-right: 10px;margin-top:7px;" visible="false"&gt;Period&lt;/label&gt;
            &lt;select name="period" id="period" class="text ui-widget-content ui-corner-all"&gt;
                  &lt;option value=""&gt;Choose Period&lt;/option&gt;
                  &lt;option value=""&gt;1&lt;/option&gt;
                  &lt;option value=""&gt;2&lt;/option&gt;
                  &lt;option value=""&gt;3&lt;/option&gt;
                  &lt;option value=""&gt;4&lt;/option&gt;
                  &lt;option value=""&gt;5&lt;/option&gt;
            &lt;/select&gt;
      &lt;!--PERIOD--&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I have tried using different query but I cannot do what I want. Here's the query I used but its not functioning and if I may ask for another jQuery suggestion that actually might work the greater. Thanks to all in advance.</p>
  
  <p><strong>HERE'S THE QUERY</strong></p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
       $("#cutoffselect").change(function(){
         $("#perioddiv div:eq(" + $(this).attr("selectedIndex") + ")").show();
      });
    &lt;/script&gt;
  </code></pre>