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
How to Find If a Text Contains Url String
How to Make Autoplay of the Swiper Slider Start Only After the Slider Enters Viewport
Jquery Class on Click Works on Desktop But Not Mobile
Check If a Number Has Repeated Digits
Javascript Regex Splitting Words in a Comma Separated String
Generate Child Row Under a Parent Row in HTML Table
Discord Bot Not Getting All Users
Find Duplicate Values in Objects With JavaScript
Different Color for Each Bar in a Bar Chart; Chartjs
Change Value of a Variable Inside Foreach Loop? Make It Available Outside the Loop
Regular Expression Which Allow Only Characters or Space
Property Does Not Exist on Type 'Never' Typescript/React
How to Highlight Parts of an Imagemap on Mouseover
Webcam Js Error in Chrome: Could Not Access Webcam
How to Reference Static Assets Within Vue JavaScript
Connecting to Tcp Socket from Browser Using JavaScript