在選擇上顯示/隱藏多個DIV ID
[英]Show/Hide Multiple DIV IDs on Select
問題描述
我想基於所選的選項顯示div。
這就是我正在嘗試的但是當我選擇一個新的選項時，我想要替換那里的div，這是一個接一個地顯示它們，因為我選擇了新的選項。
<div id="body" style="width:300px;">
<div>
<form name="frmOptions">
<select id="cboOptions" onChange="displayDiv('div',this)">
<option value="1">Option0</option>
<option value="2">Option1</option>
<option value="3">Option2</option>
<option value="4">Option3</option>
</select>
</div>
<div id="content" style="float:right;">
<div id="div0" style="display:none;">Test 0</div>
<div id="div1" style="display:none;">Test 1</div>
<div id="div2" style="display:none;">Test 2</div>
<div id="div3" style="display:none;">Test 3</div>
</div>
</form>
我正在使用的腳本。
<script type="text/javascript">
function displayDiv(id,sel){
var div = document.getElementById(id+sel.selectedIndex);
if (div) div.style.display = 'block';
}
</script>
任何人都可以幫我這個嗎？
6 個解決方案
解決方案1
1 2012-01-26 00:37:20
修復你的vals：如果你從0開始計算，那么從零開始計數。 當選擇更改時，隱藏所有div，顯示正確的div。
$('select').change(function(){
$('#content div').hide();
$('#div' + $(this).val() ).show();
});
解決方案2
1 2012-01-26 00:37:37
如果您正在使用jQuery，請嘗試將其作為您的函數：
function displayDiv(id, sel) {
$('#content div').hide();
var div = document.getElementById(id + sel.selectedIndex);
if (div) div.style.display = 'block';
}
唯一的變化是我們在顯示所選div之前先隱藏所有div。 你可以使用jQuery進行許多更改。
解決方案3
0 2012-01-26 00:36:40
你需要制作你不想顯示隱藏的div。 在javascript代碼的開頭，這樣的東西會在每次調用函數時將所有div重置為不可見。 比你只顯示你想要的div。
$("#content").find("div").each(function (index) {
$(this).attr('display', 'none');
});
解決方案4
0 2012-01-26 00:39:33
是的，如果您不使用jquery，請執行此操作：
function displayDiv(id, sel) {
var parent = document.getElementById("content");
console.log(parent.childNodes);
for (var childIndex = 0; childIndex < parent.childNodes.length; childIndex++) {
if (parent.childNodes[childIndex].style)
parent.childNodes[childIndex].style.display = "none";
}
var div = document.getElementById(id+sel.selectedIndex);
if (div) div.style.display = 'block';
}
除此以外：
function displayDiv(id, sel) {
var div = $("#" + id + sel.selectedIndex);
div.siblings().hide();
div.show();
}
解決方案5
0 2012-01-26 00:39:50
既然你用jQuery標記了你的問題，我會給你一個jQuery解決方案：
$("#cboOptions").change(function(){
$("#content div").hide(); // hide all the divs
$("#div" + (+$(this).val()- 1)).show(); // show the appropriate one
});
演示： http ： //jsfiddle.net/QLphn/1/
上面應該放在document.ready處理程序中或放在<body>的底部。 您將綁定更改處理程序而不是使用內聯'onchange'屬性。 另外，不是所有div上的內聯樣式屬性，你可以給它們一個公共類，或者甚至把#content div { display: none; } #content div { display: none; }在樣式表（如圖我演示）...
請注意，您的結束</form>標記應與開始<form>標記位於同一<div>內。
解決方案6
0 2012-01-26 00:43:10
你不必使用jquery，但它更容易
var currentDIV;
<script type="text/javascript">
function displayDiv(id,sel){
var div = document.getElementById(id+sel.selectedIndex);
if (div)
{
div.style.display = 'block';
if(currentDIV) currentDIV.style.display = 'none';
currnetDIV = div;
}
}
</script>
多個選擇框過濾器以顯示隱藏div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.