Html 如何在选择任何下拉值时显示/隐藏 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18353574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 12:25:23 来源:igfitidea点击:
How to show/hide DIV on selection of ANY drop-down value?
提问by ghilton
I have found many answers to the question:
我找到了很多问题的答案：
How do I show/hide DIV on selection of "Other" dropdown value.
如何在选择“其他”下拉值时显示/隐藏 DIV。
However I cannot find the answer to this: How do I show/hide div on selection of ANY dropdown value, e.g.
但是我找不到答案：如何在选择任何下拉值时显示/隐藏 div，例如
<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.
如果选择了上述任何选项，我希望能够显示 DIV。
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
当用户选择 1、2、3、4、5 或 6 时，我想显示一个 DIV。如果用户将他们的选择恢复为“选择问题...”，此 DIV 将再次隐藏
A JSfiddle solution would be perfect
一个 JSfiddle 解决方案将是完美的
Many thanks!
非常感谢！
回答by Kevin Bowersox
Javascript
Javascript
var elem = document.getElementById("security_question_1");
elem.onchange = function(){
var hiddenDiv = document.getElementById("showMe");
hiddenDiv.style.display = (this.value == "") ? "none":"block";
};
HTML
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
CSS
#showMe{
display:none;
}
回答by Gagan Gami
Try this:
尝试这个：
HTML:
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:
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();
});
Working Demo
工作演示
as per your requirement
根据您的要求
回答by Ayyappan Sekar
add the following function to the onchange,
将以下函数添加到 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
并最初将 div 的显示样式（需要隐藏/显示）设置为无。在此处查看演示
回答by Dennis
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";
}
}
回答by rafael
This worked for me , this is a more powerful method because use the has and contain method so you can use wildcards
这对我有用，这是一种更强大的方法，因为使用 has 和 contains 方法，因此您可以使用通配符
$( "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();
}
});
回答by Pankaj Upadhyay
<!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>
回答by Moazzam Khan
Try this -
尝试这个 -
$( "#security_question_1" ).change(function () {
if($( "option:selected", this ).text()=="text you want to match"){
$("#div-id").hide();
}else{
$("#div-id").show();
}
});
回答by Swaroop Nagendra
<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();
})
});
回答by Devang Rathod
Try this :
尝试这个 ：
Javascript :
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 :
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>
