javascript 单击选择选项时如何显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10255979/
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 show/hide divs when select options are clicked
提问by uwe
I have a select box and want to show a help text in a hidden div when you click on an option:
我有一个选择框，当您单击一个选项时，我想在隐藏的 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>
How can I create a simple loop so I don't have to write "if" statements for each option?
如何创建一个简单的循环，这样我就不必为每个选项编写“if”语句？
document.getElementById(option).style.visibility ="visible";
isn't working - javascript and me don't get along well ;-)
不工作 - javascript和我相处得不好;-)
Also, is there a simple way to hide all other divs when an option is selected?
另外，是否有一种简单的方法可以在选择一个选项时隐藏所有其他 div？
回答by Will Klein
I recommend using some CSS classes to hide/show the divs. Then the JavaScript just needs to set the class attribute for each div.
我建议使用一些 CSS 类来隐藏/显示 div。然后 JavaScript 只需要为每个 div 设置 class 属性。
This solution still works if you select more than one option.
如果您选择多个选项，此解决方案仍然有效。
HTML:
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:
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:
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;
?
?
Here is a jsFiddle to demonstrate: http://jsfiddle.net/willslab/3N9pm/9/
这是一个 jsFiddle 来演示：http: //jsfiddle.net/willslab/3N9pm/9/
I hope that helps!
我希望这有帮助！
回答by Dan M
Here's how I'd do it:
这是我的做法：
First, I'm pretty lazy, and I don't want to type style="visibility: hidden;" on each of those divs. It's easier to hide all of them at once with CSS:
首先，我很懒，不想输入 style="visibility: hidden;" 在每个 div 上。使用 CSS 一次性隐藏它们更容易：
HTML:
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="help-wrapper">
<div id="help1">help text 1</div>
<div id="help2">help text 2</div>
</div>
CSS:
CSS：
#help-wrapper div {
visibility: hidden;
}
/* It's better to use a class to highlight the selection,
in case you feel like adding more styles later (like a border or something).
*/
.current-help {
visibility: visible;
}
Now we can work on making that Javascript a little more generic:
现在我们可以让 Javascript 更通用一点：
function optionCheck()
{
var i;
var optionIndex = document.getElementById("options").value;
var helpWrapper = document.getElementById("help-wrapper");
var helpDivs = helpWrapper.getElementsByTagName("div");
// Loop through all the help divs.
for (i=0; i<helpDivs.length; i++) {
// Parse out the numeric portion of this help div's id.
var helpIndex = helpDivs[i].substring[4];
// If we found our div, highlight it.
if (helpIndex === optionIndex) {
helpDivs[i].className = "current-help";
}
// Otherwise, we should make sure it's hidden,
// in case it was the previous selection.
else {
helpDivs[i].className = "";
}
}
}
And that should do the trick!
这应该可以解决问题！
If you have any questions about the code above, I'd be happy to answer them.
如果您对上面的代码有任何疑问，我很乐意回答。
回答by Sukhjeevan
Please see the modified HTML and JavaScript code:
请查看修改后的 HTML 和 JavaScript 代码：
HTML:
HTML：
<div id="help1" style="display:none">help text 1</div>
<div id="help2" style="display:none">help text 2</div>
JAVASCRIPT:
爪哇脚本：
function optionCheck()
{
var option = document.getElementById("options").value;
if(option == "1"){
document.getElementById("help1").style.display ="";
document.getElementById("help2").style.display ="none";
}
if(option == "2"){
document.getElementById("help2").style.display ="";
document.getElementById("help1").style.display ="none";
}
}
回答by undefined
its better to wrap css styles with quotes:
最好用引号包裹 css 样式：
<div id="help1" style="visibility:hidden">help text 1</div>
<div id="help2" style="visibility:hidden">help text 2</div>
function optionCheck(){
var option = document.getElementById("options").value;
document.getElementById("help" + option).style.visibility ="visible";
}
}
回答by zognortz
Instead of getElementById(option), try something like getElementById("help" + option).
而不是getElementById(option)，尝试类似的东西getElementById("help" + option)。
回答by UVM
you can try with ternary operator in javascript:
您可以尝试在 javascript 中使用三元运算符：
document.getElementById("options").value == 1?(document.getElementById("help1").style.visibility ="visible",document.getElementById("help2").style.visibility ="hidden"):(document.getElementById("help2").style.visibility ="visible",document.getElementById("help1").style.visibility ="hidden");
This will avoid multiple if statements
这将避免多个 if 语句
