Clever Geek Handbook

Hide div select option on dropdown selection in HTML using jQuery

To get straight to the point here, I want to follow through. I want to hide a specific DIV when a specific one has been selected <OPTION>

in <SELECT>

.

Here's my HTML markup:

CHOICE

<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.

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've tried using a different query, but I can't seem to do what I want. Here's the query I used but it doesn't work and if I can ask for another jQuery suggestion that might actually work more. Thanks everyone in advance.

HERE QUERY

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


source to share


7 replies


this will do it:



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


source


here is your answer.

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

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

});


jsfiddle:

http://jsfiddle.net/LNMW3/
+1


source


To hide the div with id=perioddiv

if option is selected daily

, you can try under 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>
0


source


Check Fiddle

Using an id you can easily sort it using:

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


source


try

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

DEMO

0


source


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

0


source


try this:

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

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

});
0


source






More articles:


All Articles