我有一个选择框,当您单击一个选项时,我想在隐藏的 div 中显示帮助文本:
<select onchange="optionCheck()" multiple="multiple" name="test" id="options" size="15" class="form-select">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<div id="help1" style=visibility:hidden>help text 1</div>
<div id="help2" style=visibility:hidden>help text 2</div>
<script type="text/javascript">
function optionCheck(){
var option = document.getElementById("options").value;
if(option == "1"){
document.getElementById("help1").style.visibility ="visible";
document.getElementById("help2").style.visibility ="hidden";
}
if(option == "2"){
document.getElementById("help2").style.visibility ="visible";
document.getElementById("help1").style.visibility ="hidden";
}
}
</script>
如何创建一个简单的循环,这样我就不必为每个选项编写“if”语句?
document.getElementById(option).style.visibility ="visible";
不工作 - javascript 和我相处得不好 ;-)
此外,是否有一种简单的方法可以在选择一个选项时隐藏所有其他 div?
最佳答案
我建议使用一些 CSS 类来隐藏/显示 div。然后 JavaScript 只需要为每个 div 设置 class 属性。
如果您选择多个选项,此解决方案仍然有效。
HTML:
<select onchange="optionCheck()" multiple="multiple" name="test" id="options" size="15" class="form-select">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<div id="help1" class="helpText">help text 1</div>
<div id="help2" class="helpText">help text 2</div>
CSS:
/* consider "display: none/block" instead of visibility: hidden/visible
if you don't want the hidden divs to occupy space */
.helpText {
visibility: hidden;
}
.helpTextShow {
visibility: visible;
}
JavaScript:
function optionCheck() {
var i, len, optionVal, helpDiv,
selectOptions = document.getElementById("options");
// loop through the options in case there
// are multiple selected values
for (i = 0, len = selectOptions.options.length; i < len; i++) {
// get the selected option value
optionVal = selectOptions.options[i].value;
// find the corresponding help div
helpDiv = document.getElementById("help" + optionVal);
// move on if we didn't find one
if (!helpDiv) { continue; }
// set CSS classes to show/hide help div
if (selectOptions.options[i].selected) {
helpDiv.className = "helpText helpTextShow";
} else {
helpDiv.className = "helpText";
}
}
}
// alternative method of binding the onchange handler, merely a suggestion
//document.getElementById("options").onchange = optionCheck;
这是一个用于演示的 jsFiddle:http://jsfiddle.net/willslab/3N9pm/9/
希望对您有所帮助!
关于javascript - 单击选择选项时如何显示/隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10255979/