CODEWITHSUNDEEP
javascriptphpjquery
khangkhungkhernitz
khangkhungkhernitz

Reputation: 53

How to Hide/Show 'div' using jQuery?

How can I show the text box depending on the user's selection in a dropdown box?

<select name="sites" id="select5" required="yes">
  <?php
   for($i=0;$i<=128;$i++){
     echo "<option>".$i."</option>";
   }                               
  ?>
</select>

<div id="YES"> 
 Other: <input class="input-text" type="text" name="name"/>
</div>

If the user selects 1 - the text box will not show. Then if the user selects more than 2 -> the <div id="YES"> will show.

Here's my jQuery:

<script type="text/javascript">
    $(document).ready(function(){
    $('#YES').hide();
    $("#select5").change(function(){
            $('#YES').hide('slow');
            $("#" + this.value).show('slow');
    });
    });
</script>

Any suggestions?

Upvotes: 0

Views: 137

Answers (2)

John Christian De Chavez
John Christian De Chavez

Reputation: 312

try this out 

$('#select5').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if(valueSelected == 1){
$('#YES').show();
}
else{ $('#YES').hide();}
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can call the hide/show based on the value of the select like

$(document).ready(function () {
    $('#YES').hide();
    $("#select5").change(function () {
        $('#YES')[this.value > 1 ? 'show' : 'hide']('slow');
    });
});

Demo: Fiddle

Upvotes: 6

Related Questions