CODEWITHSUNDEEP
javascriptjqueryhtml
Dodgeball
Dodgeball

Reputation: 125

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>

Upvotes: 3

Views: 1486

Answers (7)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

To hide div with id=perioddiv when daily option selected, you can try below jquery:

<script type="text/javascript">
     // bind change event using '#cutoff' as select id="cutoff"
     $("#cutoff").change(function(){
       // hide if selected value is "daily"
       if($(this).val() == "daily")
          $("#perioddiv").hide();
       else
          $("#perioddiv").show();
    });
  </script>

Upvotes: 0

learner420
learner420

Reputation: 182

here is your answer.

$('#cutoff').change(function () {

    if ($('#cutoff').find(":selected").text() == 'Daily') {
        $('#perioddiv').hide();
    } else {
        $('#perioddiv').show();
    }

});

jsfiddle:

http://jsfiddle.net/LNMW3/

Upvotes: 1

Varun Nath
Varun Nath

Reputation: 5632

Check if the selected option is daily and then hide the div.

$(document).ready(function(){

    $('#cutoff').change(function(){

        if($('#cutoff option:selected').val() == 'daily')
        {
            $('#perioddiv').hide();
        }
        else
        {
            $('#perioddiv').show();
        }

     });

});

DEMO FIDDLE

Upvotes: 0

Amit Malakar
Amit Malakar

Reputation: 608

try this:

$('#period').change(function(){

    // check if "daily" is selected
    if($(this).val() == "daily") {
        $('#perioddiv').hide();
    }

});

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

try

 $("#cutoff").change(function () {
    if (this.value == "daily") {
        $("#perioddiv").hide();
    } else {
        $("#perioddiv").show();
    }
});

DEMO

Upvotes: 0

Emma
Emma

Reputation: 657

Check this Fiddle

Using the ID's you can easily sort this out by using:

$("#selectorID").hide();

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

this will do it:

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

Upvotes: 1

Related Questions