如何使用JavaScript隱藏和顯示div onselect
[英]How to hide and show div onselect using javascript
問題描述
這是我正在嘗試的代碼-
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效果。
5 個解決方案
解決方案1
3 2012-05-25 05:01:33
我知道這被標記為javascript，而不是jQuery，但是使用jQuery做到這一點非常簡單，因此這里是一個示例。
$('#category').on('change click', function() {
$('div').hide();
$('#showdiv' + this.value).show();
});
可用的jsFiddle： http ： //jsfiddle.net/UBsp9/
解決方案2
2 2012-05-25 05:07:41
我的第一個猜測是，您正在嘗試將選擇框的字符串結果與myDivs數組中的整數進行比較。
這是一些與原始代碼匹配的原始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/
解決方案3
2 已采納 2012-05-25 05:23:40
雖然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>
解決方案4
0 2012-05-25 05:04:26
如果可以使用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
0 2012-05-25 05:17:20
你也可以試試這個
如何使用JavaScript隱藏/顯示div標簽？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.