Dodgeball Dodgeball - 5 months ago 12
Javascript Question

Hide a div upon option change in select dropdown in HTML using jQuery

To get straight to the point here's I want to accomplish. I want to hide a certain DIV when a certain

<OPTION>
in
<SELECT>
was selected.

Here's my HTML markup:

THE SELECT

<select name="cutoffselect" id="cutoff" class="text ui-widget-content ui-corner-all" style="padding-right: 80px;">
<option value="">Choose One</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="semimonthly">Semi Monthly</option>
<option value="monthly">Monthly</option>
</select>


and the DIV I want to hide if DAILY was selected.

THE PERIOD

<div class="input-group-addon" style="width:20%;" title='Filter By' id = "perioddiv">
<!--PERIOD-->
<label for="period" style="padding-right: 10px;margin-top:7px;" visible="false">Period</label>
<select name="period" id="period" class="text ui-widget-content ui-corner-all">
<option value="">Choose Period</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<!--PERIOD-->
</div>


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.

HERE'S THE QUERY

<script type="text/javascript">
$("#cutoffselect").change(function(){
$("#perioddiv div:eq(" + $(this).attr("selectedIndex") + ")").show();
});
</script>

Answer

this will do it:

<script type="text/javascript">
     $(function(){
         $("#cutoff").change(function(){
             if($(this).val()=='daily'){
                 $('#perioddiv').hide();
             }
             else{
                 $('#perioddiv').show();
             }
         });
     });
  </script>