nqw*_*qw1 2 javascript html5 html-lists drop-down-menu
是的，我试图寻找这个问题的答案，但我发现了许多类似的问题，但似乎没有一个对我有帮助。
我有几个选项的下拉列表，当用户选择一个选项时，会出现另一个带有正确选项的下拉列表。是的，这是简单的部分，但是我需要将选定的选项发送到服务器，这对我来说是棘手的部分。我创建了两个不同的下拉列表，这些下拉列表在用户从“主要”下拉列表中选择一个选项后弹出。问题在于，正确的值仅从弹出的第一个列表进入服务器。如果我从弹出的第二个列表中选择值，则第一个列表的第一个选项进入服务器。
这是我的代码：
<!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>
因此，如果我选择男S作为衬衫。我在服务器中收到值“ femaleXS”。但是，如果我选择女性S作为衬衫，则价值将正确分配给服务器。只有第一个弹出列表中的值才能正确发送到服务器。
好的，所以我决定只弹出一个列表，此列表将包含所有选项。我会根据用户选择哪种衬衫类型来隐藏错误的选项。问题是，我用完了JS技能：)我正在使用的JS代码是从这里获得的。
帮帮我。我猜一个带有隐藏值的下拉列表将是最佳选择，但我只是不知道该怎么做：P
您的javascript代码可能要简单得多，但只需回答您的问题，请添加：
document.getElementById('shirtsize' + lastDiv).disabled = true;
后：
document.getElementById(lastDiv).className = "hiddenMenu";
并添加：
document.getElementById('shirtsize' + divName).disabled = false;
后：
document.getElementById(divName).className = "visibleMenu";
然后将禁用添加到两个隐藏的选择标签。
喜欢：
<select name="subjectCategory" id="shirtsizemale" disabled>
禁用表示它不会发送到服务器。
| 归档时间： |
|
| 查看次数： |
14042 次 |
| 最近记录： |