javascript 如何使用javascript隐藏和显示div onselect
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10748600/
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
How to hide and show div onselect using javascript
提问by swapnesh
This is the code i am trying -
这是我正在尝试的代码 -
DIVS-
DIVS-
<div id="showdiv16" style="display:none;">...</div>
<div id="showdiv17" style="display:none;">...</div>
<div id="showdiv18" style="display:none;">...</div>
<div id="showdiv19" style="display:none;">...</div>
Now i have a drop down menu from which i am fetching values 16,17, 18,19
现在我有一个下拉菜单，我从中获取值 16,17, 18,19
and on this drop down menu, i an calling onchange method as
在这个下拉菜单上，我调用 onchange 方法作为
<select name="category" id="category" onChange="showSelected(this.value);showSubcategory();" >
And my JavaScript function is-
我的 JavaScript 函数是-
<script type="text/javascript">
function showSelected( sapna )
{
var myDivs = new Array(16,17,18,19);
for(var i=0; i<myDivs.length; i++)
{
if(myDivs[i] == sapna)
{
var divtoshow = 'showdiv'+sapna;
document.getElementById('showdiv'+sapna).style.display = "block";
}
else
{
document.getElementById('showdiv'+myDivs[i]).style.display = "none";
}
}
return false;
}
</script>
Let me know how can i achieve this show/hide div effect.
让我知道如何实现这种显示/隐藏 div 效果。
采纳答案by TheVillageIdiot
Though jQuerywould be much easier and cleaner but get this in plain JavaScriptbelow:
虽然jQuery会更容易和更干净，但请在JavaScript下面简单说明：
<html>
<head>
<title>test</title>
<style type="text/css">
div{height:50px;width:200px;text-align:center;
vertical-align:middle;border:1px dotted green;
background-color:khaki;}
</style>
</head>
<body>
<select id="test" onchange="showSelected(this.value)">
<option value="-1" selected="selected">select</option>
<option value="16">cat 16</option>
<option value="17">cat 17</option>
<option value="18">cat 18</option>
<option value="19">cat 19</option>
</select>
<div id="showdiv16" style="display:none;">16</div>
<div id="showdiv17" style="display:none;">17</div>
<div id="showdiv18" style="display:none;">18</div>
<div id="showdiv19" style="display:none;">19</div>
</body>
<script type="text/javascript">
var myDivs = new Array(16, 17, 18, 19);
function showSelected(sapna) {
var t = 'showdiv' + sapna,
r, dv;
for (var i = 0; i < myDivs.length; i++) {
r = 'showdiv' + myDivs[i];
dv = document.getElementById(r);
if (dv) {
if (t === r) {
dv.style.display = 'block';
} else {
dv.style.display = 'none';
}
}
}
return false;
}
</script>
</html>
回答by Christian
I know this is tagged as javascript and not jQuery, but it's super trivial to do this using jQuery, so here's an example.
我知道这被标记为 javascript 而不是 jQuery，但是使用 jQuery 做到这一点非常简单，所以这里有一个例子。
$('#category').on('change click', function() {
$('div').hide();
$('#showdiv' + this.value).show();
});
Working jsFiddle: http://jsfiddle.net/UBsp9/
工作 jsFiddle：http: //jsfiddle.net/UBsp9/
回答by Collin Green
My first guess is that you are trying to compare the string result from your select box against the integers in your myDivs array.
我的第一个猜测是，您正在尝试将选择框中的字符串结果与 myDivs 数组中的整数进行比较。
Here is some vanilla js matching your original code (although you can really save a lot of headache using a JS lib like jquery, so you may want to look into it).
这是一些与您的原始代码相匹配的 vanilla js（尽管使用像 jquery 这样的 JS 库确实可以省去很多麻烦，因此您可能需要研究一下）。
function showSelected(sapna)
{
var myDivs = new Array(16,17,18,19);
for(var i=0; i<myDivs.length; i++)
{
document.getElementById('showdiv'+myDivs[i]).style.display = (myDivs[i] == parseInt(sapna)) ? 'block' : 'none';
} // end for i in myDivs.length
} // end function showSelected??
And a js fiddle: http://jsfiddle.net/Wyedr/1/
还有一个 js 小提琴：http: //jsfiddle.net/Wyedr/1/
回答by Umair Noor
回答by Ankit
if you can use jquery then you can do something like this:
如果您可以使用 jquery，那么您可以执行以下操作：
<div id="showdiv16" class='targets' style="display:none;">Div 16</div>
<div id="showdiv17" class='targets' style="display:none;">Div 17</div>
<div id="showdiv18" class='targets' style="display:none;">Div 18</div>
<div id="showdiv19" class='targets' style="display:none;">Div 19</div>
<select name="category" id="category">
<option value=''>Select</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
</select>
?and here's the jquery
?这是jquery
$(function(){
$('#category').change(function(){
var divToShow = $(this).val();
$('.targets').hide();
$('#showdiv' + divToShow ).show();
? });
})
you can check the working demo here http://jsfiddle.net/H9cvZ/35/
你可以在这里查看工作演示http://jsfiddle.net/H9cvZ/35/
