如何在选择ANY下拉值时显示/隐藏DIV
How to show/hide DIV on selection of ANY drop-down value?
我找到了很多问题的答案:
如何在选择"其他"下拉值时显示/隐藏DIV。
然而,我找不到答案:如何在选择ANY下拉值时显示/隐藏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>
如果选择了上述任何选项,我希望能够显示DIV。
当用户选择1、2、3、4、5或6时,我想显示一个DIV。如果用户将其选择恢复为"选择问题…",该DIV将再次隐藏
JSfiddle解决方案将是完美的
非常感谢!
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;
}
FIDDLEhttp://jsfiddle.net/Sj5FN/1/
试试这个:
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();
});
工作演示
根据您的要求
将以下函数添加到onchange,
function showHide(value) {
if (value=='')
document.getElementById('divShow').style.display = 'none';
else
document.getElementById('divShow').style.display = 'block';
}
并且最初将div的显示样式(需要隐藏/显示)设置为none。点击此处查看演示
试试这个-
$( "#security_question_1" ).change(function () {
if($( "option:selected", this ).text()=="text you want to match"){
$("#div-id").hide();
}else{
$("#div-id").show();
}
});
试试这个:
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>
<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();
})
});
为什么不使用event?如下所示:
<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";
}
}
这对我来说很有效,这是一个更强大的方法,因为使用has-and-contain方法可以使用通配符
$( "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();
}
});
<!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>
您可以将jQuery的change()方法与show()和hide()方法结合使用。以下示例中的div块默认情况下使用CSS display
属性隐藏,该属性设置为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();
});
您可以在这里看到一个示例:如何在选择ANY下拉值时显示/隐藏DIV?
相关文章:
- 在jquery中为显示/隐藏设置cookie
- PHP Javascript显示/隐藏按钮不工作
- 打开/关闭按钮以显示/隐藏内容
- 显示隐藏复选框
- 在bootstrap中显示隐藏特定的li
- JQuery上下文菜单显示/隐藏问题
- JQuery在单击时停止显示/隐藏
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 使用 jQuery 切换显示/隐藏
- 显示/隐藏有关模型更改的指令内容
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- 显示/隐藏不起作用
- 使用ng-hide根据条件显示/隐藏按钮
- 仅在第一个结果中显示/隐藏MySQL结果函数
- 显示/隐藏http://ftp链接
- 在显示/隐藏中单击时删除的文本
- 是否可以在不重新渲染的情况下显示/隐藏父对象中的元素
- 将页面内容向左移动时显示/隐藏右侧面板
- 显示/隐藏将不会加载