基于另一个下拉列表的选择来显示/隐藏下拉列表

是的，我试着搜索这个问题的答案，我发现了很多类似的问题，但他们没有一个似乎帮助我。基于另一个下拉列表的选择来显示/隐藏下拉列表

我有几个选项下拉列表，当用户选择一个选项，另一个下拉列表出现正确的选择。是的，这很简单，但我需要将选定的选项发送给服务器，这对我来说是非常棘手的部分。在用户从“主”下拉列表中选择了一个选项后，我创建了两个不同的下拉列表。问题是，只有从弹出的第一个列表中，正确的值才会进入服务器。如果我从弹出的第二个列表中选择值，则第一个列表的第一个选项将转到服务器。

这里是我的代码：

<!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&hellip;</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代码从here得到。

帮帮我。我想一个下拉隐藏值列表将是最好的选择，但我只是不知道如何做到这一点：P

来源

2011-08-09 nqw1

你愿意使用像jQuery这样的JavaScript库吗？它会让你的生活变得非常容易。此外，Knockout.js主要是为此目的而定义的。 – ghayes

使用像jQuery这样的JS库很好，并且感谢关于Knockout.js的提示。 – nqw1

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>

禁用意味着它不会被发送到服务器。

来源

2011-08-09 08:01:22 Ariel

非常感谢！这解决了我的问题。如果你感到无聊，请不要犹豫，以简化我使用的JS代码：P – nqw1

基于另一个下拉列表的选择来显示/隐藏下拉列表

回答

相关问题