javascript 根据选择另一个下拉列表显示/隐藏下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6993038/
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
Show/hide drop down list based on selection of another drop down list
提问by nqw1
Yes, I've tried to search answer for this problem and I found many similar questions but none of them seemed to help me.
是的，我试图搜索这个问题的答案，我发现了很多类似的问题，但似乎没有一个对我有帮助。
I have drop down list with few options and when user selects one option, another drop down list appears with correct choices. Yes, this was the easy part but I need to send selected options to a server and that's the tricky part for me. I have created two different drop down lists which pop up after the user has selected one option from the "main" drop down list. Problem is that correct values goes to the server only from the first list that pops up. If I choose value from the 2nd list that pops up, the first option of the 1st list goes to server.
我有几个选项的下拉列表，当用户选择一个选项时，另一个下拉列表会出现正确的选项。是的，这是简单的部分，但我需要将选定的选项发送到服务器，这对我来说是棘手的部分。我创建了两个不同的下拉列表，它们会在用户从“主”下拉列表中选择一个选项后弹出。问题是正确的值仅从弹出的第一个列表发送到服务器。如果我从弹出的第二个列表中选择值，第一个列表的第一个选项将转到服务器。
Here's my code:
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.hiddenMenu {display: none;}
.visibleMenu {display: inline;}
</style>
<script type="text/javascript">
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenMenu";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleMenu";
lastDiv = divName;
}
}
</script>
</head>
<body>
<form action="http://url.here" method="post" enctype="multipart/form-data">
<label for="shirttype">T-shirt </label>
<select name="category" id="shirttype" onchange="showDiv(this.value);">
<option value="">Choose type…</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
<br/>
<p id="female" class="hiddenMenu">
<label for="shirtsizefemale">Size </label>
<select name="subjectCategory" id="shirtsizefemale">
<option value="femaleXS">XS</option>
<option value="femaleS">S</option>
</select>
</p>
<p id="male" class="hiddenMenu">
<label for="shirtsizemale">Size </label>
<select name="subjectCategory" id="shirtsizemale">
<option value="maleXS">XS</option>
<option value="maleS">S</option>
</select>
</p>
<br/>
<input type="submit" value="Upload">
</form>
</body>
</html>
So, if I select male S to be my shirt. I receive value "femaleXS" in the server. But if I select female S to be my shirt, value goes correctly to server. Only the value from the 1st popping up list goes correctly to the server.
所以，如果我选择男 S 作为我的衬衫。我在服务器中收到值“femaleXS”。但是，如果我选择女性 S 作为我的衬衫，则值会正确地传递给服务器。只有第一个弹出列表中的值才能正确发送到服务器。
Ok, so then I decided to make only one list that pops up and this list would have all the options. I would just hide the wrong options depending on what type of shirt user selects. Problem is, I run out of JS skills :) This JS code I'm using I got from here.
好的，所以我决定只制作一个弹出的列表，这个列表将包含所有选项。我会根据用户选择的衬衫类型隐藏错误的选项。问题是，我的 JS 技能用完了 :) 我正在使用的这段 JS 代码是从这里获得的。
Help me out. I guess one drop down list with hidden values would be the best choice but I just don't know how to do it :P
帮帮我。我想一个带有隐藏值的下拉列表将是最好的选择，但我只是不知道该怎么做：P
回答by Ariel
Your javascript code could be a lot simpler, but to just answer your question add:
您的 javascript 代码可能要简单得多，但要回答您的问题，请添加：
document.getElementById('shirtsize' + lastDiv).disabled = true;
after:
后：
document.getElementById(lastDiv).className = "hiddenMenu";
And add:
并添加：
document.getElementById('shirtsize' + divName).disabled = false;
after:
后：
document.getElementById(divName).className = "visibleMenu";
Then add disabled to both hidden select tags.
然后将禁用添加到两个隐藏的选择标签。
Like:
喜欢：
<select name="subjectCategory" id="shirtsizemale" disabled>
disabled means it does not get sent to the server.
禁用意味着它不会被发送到服务器。
