如何使用javascript隐藏和显示div onselect
Posted
技术标签:
【中文标题】如何使用javascript隐藏和显示div onselect【英文标题】：How to hide and show div onselect using javascript 【发布时间】：2012-05-31 16:37:48 【问题描述】：这是我正在尝试的代码 -
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>
现在我有一个下拉菜单，从中获取值 16,17, 18,19
在这个下拉菜单中，我调用了 onchange 方法
<select name="category" id="category" onChange="showSelected(this.value);showSubcategory();" >
而我的 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>
让我知道如何实现这种显示/隐藏 div 效果。
【问题讨论】：
你的问题到底是什么？ 你为什么不用jquery？ @ryan 代码无法正常工作，那么代码是否存在逻辑问题？ @TheVillageIdiot 是的，实际上我从 jquery 中发现了大部分这种效果，但想只在 JS 中进行，但是糟糕，代码不起作用:( @Webtecher 你能多解释一下并给出一个解决方案吗:) 【参考方案1】：我知道这被标记为 javascript 而不是 jQuery，但是使用 jQuery 执行此操作非常简单，所以这里有一个示例。
$('#category').on('change click', function()
$('div').hide();
$('#showdiv' + this.value).show();
);
工作 jsFiddle：http://jsfiddle.net/UBsp9/
【讨论】：
【参考方案2】：虽然jQuery 会更容易和更干净，但请在下面简单了解JavaScript：
<html>
<head>
<title>test</title>
<style type="text/css">
divheight: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>
【讨论】：
谢谢很多..但是一个查询..为什么 Keeyai 代码看起来不错但对我不起作用，因为我有 23 个 div 而你的代码工作，为什么 3 === ??跨度> @Keeyai 的代码也应该可以工作并且是更简洁的解决方案。尝试将select 上的处理程序从onChange 更改为onchange。
是的，他的解决方案非常合适，但是您的代码为我点击了，这就是为什么接受为答案:) jquery 仍然有些我必须探索:(【参考方案3】：
我的第一个猜测是您正在尝试将选择框中的字符串结果与 myDivs 数组中的整数进行比较。
这里有一些与您的原始代码匹配的 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
还有一个 js 小提琴：http://jsfiddle.net/Wyedr/1/
【讨论】：
【参考方案4】：如果你可以使用 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>
这里是 jquery
$(function()
$('#category').change(function()
var divToShow = $(this).val();
$('.targets').hide();
$('#showdiv' + divToShow ).show();
);
)
你可以在这里查看工作演示 http://jsfiddle.net/H9cvZ/35/
【讨论】：
【参考方案5】：你也可以试试这个
For Sample Code, Check this JSFiddle
【讨论】：
以上是关于如何使用javascript隐藏和显示div onselect的主要内容，如果未能解决你的问题，请参考以下文章
如何通过将鼠标悬停在Javascript中的三个按钮之一来显示和更新隐藏的div元素？
如何根据使用 javascript 或 php 的天数隐藏/显示 div？