Reputation: 127
I have found many answers to the question:
How do I show/hide DIV on selection of "Other" dropdown value.
However I cannot find the answer to this: How do I show/hide div on selection of ANY dropdown value, e.g.
<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>
I want to be able to show a DIV if any of the above options are selected.
When the user selects 1, 2, 3, 4, 5, or 6 I want to show a DIV. If the user reverts their selection back to "Select question..." this DIV will hide again
A JSfiddle solution would be perfect
Many thanks!
Upvotes: 2
Views: 92583
Reputation: 915
You can use jQuery’s change() method in combination with show() and hide() methods. The div blocks in the following example are hidden by default using the CSS display
property, which is set to none
.
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var val = $(this).attr("value");
if(val){
$(".msg").not("." + val).hide();
$("." + val).show();
} else{
$(".msg").hide();
}
});
}).change();
});
You can see an example here: How to show/hide DIV on selection of ANY drop-down value?
Upvotes: 0
Reputation: 2138
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.resposnsiveImg{width: 100%; height:345px; padding: 10px; border: 1px solid #ccc; border-radius: 5px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-12">
<select id="mySelect" onchange="mySelectfunction()" class="form-control">
<option value="">Select</option>
<option value="img1">img1</option>
<option value="img2">img2</option>
<option value="img3">img3</option>
<option value="all">all</option>
</select>
<script>
function mySelectfunction(){
getValue = document.getElementById("mySelect").value;
if(getValue == "img1"){
document.getElementById("img1").style.display = "block";
document.getElementById("img2").style.display = "none";
document.getElementById("img3").style.display = "none";
}
if(getValue == "img2"){
document.getElementById("img1").style.display = "none";
document.getElementById("img2").style.display = "block";
document.getElementById("img3").style.display = "none";
}
if(getValue == "img3"){
document.getElementById("img1").style.display = "none";
document.getElementById("img2").style.display = "none";
document.getElementById("img3").style.display = "block";
}
if(getValue == "all"){
document.getElementById("img1").style.display = "block";
document.getElementById("img2").style.display = "block";
document.getElementById("img3").style.display = "block";
}
}
</script>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-4 col-md-4 col-xs-12" id="img1" style="display:none;"><img src="https://www.w3schools.com/html/pulpitrock.jpg" class="resposnsiveImg" /></div>
<div class="col-sm-4 col-md-4 col-xs-12" id="img2" style="display:none;"><img src="https://www.w3schools.com/html/img_girl.jpg" class="resposnsiveImg" /></div>
<div class="col-sm-4 col-md-4 col-xs-12" id="img3" style="display:none;"><img src="https://www.w3schools.com/html/img_chania.jpg" class="resposnsiveImg" /></div>
</div>
</div>
</body>
</html>
Upvotes: 0
Reputation: 10251
Try this:
HTML:
<div>
<select>
<option value="choose">Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="choose box">You have to select <strong>any one option</strong> so i am here</div>
<div class="red box">You have selected <strong>red option</strong> so i am here</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>
Javascript:
$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="red"){
$(".box").hide();
$(".red").show();
}
if($(this).attr("value")=="green"){
$(".box").hide();
$(".green").show();
}
if($(this).attr("value")=="blue"){
$(".box").hide();
$(".blue").show();
}
if($(this).attr("value")=="choose"){
$(".box").hide();
$(".choose").show();
}
});
}).change();
});
as per your requirement
Upvotes: 9
Reputation: 21
This worked for me , this is a more powerful method because use the has and contain method so you can use wildcards
$( "YOURSELECT" ).change(function () {
if($("YOURSELECT").has('option:selected:contains(YourWord)').length){
$("ELEMENT-TO-HIDE-IF-CONDITION-MATCH").hide();
}else{
$("ELEMENT-TO-HIDE-IF-CONDITION-MATCH").show();
}
});
Upvotes: 0
Reputation: 31
Why don't use event? like the following:
<select class="default" id="security_question_1" name="security_question_1" onchange="itemChange(this)">
<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="content" style="visibility:hidden">selection result
</div>
function itemChange(sender) {
var c = document.getElementById("content");
if (sender.value > 0) {
c.innerHTML = sender.value;
c.style.visibility = "visible";
} else {
c.innerHTML = "selection result";
c.style.visibility = "hidden";
}
}
Upvotes: 0
Reputation: 605
<select class="default" id="security_question_1" name="security_question_1">
<option value="" id="hide-div"selected>Select question...</option>
<option value="1" id="show-div">Question One</option>
<option value="2" id="show-div">Question Two</option>
<option value="3" id="show-div">Question Three</option>
<option value="4" id="show-div">Question Four</option>
<option value="5" id="show-div">Question Five</option>
<option value="6" id="show-div">Question Six</option>
</select>
$(document).ready(function(){
$(".spl-div").hide();
$("option[id*='show-div']").bind('click', function(){
$('.spl-div').show();
});
$("option[id*='hide-div']").bind('click',function(){
$(".spl-div").hide();
})
});
Upvotes: 0
Reputation: 11485
add the following function to the onchange,
function showHide(value) {
if (value=='')
document.getElementById('divShow').style.display = 'none';
else
document.getElementById('divShow').style.display = 'block';
}
and set the display style of the div (which is needed to hide/shown) to none initially. Check demo here
Upvotes: 1
Reputation: 6736
Try this :
Javascript :
function check_dd() {
if(document.getElementById('security_question_1').value == "") {
document.getElementById('test').style.display = 'none';
} else {
document.getElementById('test').style.display = 'block';
}
}
HTML :
<select class="default" id="security_question_1" name="security_question_1" onchange="check_dd();">
<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="test" style="display:none;">test</div>
Upvotes: 0
Reputation: 3170
Try this -
$( "#security_question_1" ).change(function () {
if($( "option:selected", this ).text()=="text you want to match"){
$("#div-id").hide();
}else{
$("#div-id").show();
}
});
Upvotes: 0
Reputation: 94499
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/
Upvotes: 16