Want to Show/Hide Div Based on Dropdown Box Selection

Want to show/hide div based on dropdown box selection

Wrap the code within $(document).ready(function(){...........}); handler , also remove the ; after if

$(document).ready(function(){
$('#purpose').on('change', function() {
if ( this.value == '1')
//.....................^.......
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});

Fiddle Demo

Show/hide divs based on dropdown selection - jquery

You have several syntax errors . You are not closing the else if with }. You may want to check console for those.

Also, not sure why you are doing $(this).find("option:selected").each(function(){... since there can be only one option selected at any given time.

Here is the working code.

$(document).ready(function() {  $("select").change(function() {    var color = $(this).val();    if (color == "red") {      $(".box").not(".red").hide();      $(".red").show();    } else if (color == "green") {      $(".box").not(".green").hide();      $(".green").show();    } else if (color == "blue") {      $(".box").not(".blue").hide();      $(".blue").show();    } else if (color == "maroon") {      $(".box").not(".maroon").hide();      $(".maroon").show();    } else if (color == "magenta") {      $(".box").not(".magenta").hide();      $(".magenta").show();    } else {      $(".box").hide();    }  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>  <select>    <option>Choose Color</option>    <option value="red">Red</option>    <option value="green">Green</option>    <option value="blue">Blue</option>    <option value="maroon">maroon</option>    <option value="magenta">magenta</option>  </select></div><div class="red box"></div><div class="green box">hello</div><div class="blue box">talofa</div><div class="maroon box">  <h2>BURGANDY!</h2></div><div class="magenta box">  <h2>PINK!</h2></div>

Hide or show div based on dropdown selection

Give the Id to first dropdown and perform the change event based of id selectors

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Select Box</title>
<style type="text/css">
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ddColor").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="red"){
$(".box").not(".red").hide();
$(".red").show();
}
else if($(this).attr("value")=="green"){
$(".box").not(".green").hide();
$(".green").show();
}
else if($(this).attr("value")=="blue"){
$(".box").not(".blue").hide();
$(".blue").show();
}
else{
$(".box").hide();
}
});
}).change();
});
</script>
</head>
<body>
<div>
<select id="ddColor">
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="red box">
<p> <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select></p>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

similarly, you can use the id for second select for its change events.

Hope this may helps you :-)

How to show and hide div elements based on dropdown selection

Try this

$('#select').on('change', function(){   $('.subject').hide();  $('.'+this.value).show();});
.subject {  display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <select name="subjects" id="select" class="form-control">       <option value="">Number of Subjects</option>       <option value="one">One</option>       <option value="two">Two</option>       <option value="three">Three</option>    </select>
<div class="one two three subject" id="one"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode1" class="form-control"> </div>
<div class="col-md-3"> <label>Name</label> <input type="text" name="sname1" class="form-control"> </div> </div> </div>
<div class="two three subject" id="two"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode2" class="form-control"> </div>
<div class="col-md-3"> <label>Name</label> <input type="text" name="sname2" class="form-control"> </div> </div> </div>
<div class="three subject" id="three"> <div class="row"> <div class="col-md-3"> <label>Code</label> <input type="text" name="scode2" class="form-control"> </div>
<div class="col-md-3"> <label>Name</label> <input type="text" name="sname2" class="form-control"> </div> </div> </div>

Show/Hide based on dropdown option

Can use filter() to set final display and do opposite on whole group before the filter

$("select").on("change", function(){  var value = this.value  // hide all data-show  $('[data-show]').hide().filter(function(){     return $(this).data('show') === value;  }).show()// only show matching ones   $('[data-hide]').show().filter(function(){     return $(this).data('hide') === value;  }).hide()
}).change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select>   <option value='test'>Test</option>   <option value='example'>Example</option>   <option value='blah'>Blah</option></select><div data-show="blah">Should be shown when blah</div><div data-hide="example">Should be hidden when example</div>

show/hide multiple divs based on dropdown box selection

Try this. This would let you show the divs in the sequential order.

$('div').hide();
$('select').click(function()
{
var targetDiv = $("#div" + $(this).val());
var prevDiv = $($("#div" + $(this).val())).prev('div');
if($(this).val() == "1" || prevDiv.is(":visible") )
$("#div" + $(this).val()).show();

});

http://jsfiddle.net/o5y9959b/3/

UPDATE :

In order to show items with combo select value til the 1st div, just perform a for loop in reverse order.

$('div').hide();
$('select').click(function()
{
$('div').hide(); // remove this if you don't want to hide all of them
for(var i = $(this).val() ; i >= 1 ; i--)
$("#div" + i).show();
});

http://jsfiddle.net/o5y9959b/6/

How to show/hide DIV on selection of ANY drop-down value?

Javascript

var elem = document.getElementById("security_question_1");
elem.onchange = function(){
var hiddenDiv = document.getElementById("showMe");
hiddenDiv.style.display = (this.value == "") ? "none":"block";
};

HTML

<select class="default" id="security_question_1" name="security_question_1">
<option value="" selected>Select question...</option>
<option value="1">Question One</option>
<option value="2">Question Two</option>
<option value="3">Question Three</option>
<option value="4">Question Four</option>
<option value="5">Question Five</option>
<option value="6">Question Six</option>
</select>
<div id="showMe">Value Selected</div>

CSS

#showMe{
display:none;
}

FIDDLE
http://jsfiddle.net/Sj5FN/1/

JQuery - Show Hide DIVS based on 2 different select drop down values

No need to loop. Try this:

 <script>
$(document).ready(function(){
$('select').change(function(){
if (($(this).val() == 'bfcn') && ($(this).siblings('select').val() == 'bfcn')){
$('.bfcn').show();
} else {
$('.bfcn').hide();
}
});
});
</script>

This will only execute the show if the value of both selects are correct. You could even run a series of values in else if statements to display different things on different selections. If you have more than two selects and siblings doesn't work, you could use direct classes, but from your question this should work.

Here's my demo HTML:

 <select title="Select 1" id="select1">
<option value="">Select an option</option>
<option value="1">1</option>
<option value="bfcn">bfcn</option>
</select>
<select title="Select 2" id="select2">
<option value="">Select an option</option>
<option value="3">3</option>
<option value="bfcn">bfcn</option>
</select>
<p class="bfcn" style="display: none;">BFCN</p>


Related Topics



Leave a reply



Submit