Javascript 根据选择的其他下拉列表显示/隐藏下拉列表_Javascript_Html_Drop Down Menu_Html Lists

Javascript 根据选择的其他下拉列表显示/隐藏下拉列表

javascript html drop-down-menu

Javascript 根据选择的其他下拉列表显示/隐藏下拉列表,javascript,html,drop-down-menu,html-lists,Javascript,Html,Drop Down Menu,Html Lists,是的，我试图寻找这个问题的答案，我发现了许多类似的问题，但似乎没有一个对我有帮助我有几个选项的下拉列表，当用户选择一个选项时，另一个下拉列表会显示正确的选项。是的，这是简单的部分，但我需要将选定的选项发送到服务器，这对我来说是棘手的部分。我创建了两个不同的下拉列表，在用户从“主”下拉列表中选择一个选项后弹出。问题是，正确的值只从弹出的第一个列表进入服务器。如果我从弹出的第二个列表中选择值，第一个列表的第一个选项将转到服务器这是我的密码： <!DOCTYPE html> <h

是的，我试图寻找这个问题的答案，我发现了许多类似的问题，但似乎没有一个对我有帮助

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

这是我的密码：

<!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>


.hiddenMenu{显示：无；}
.VisibleMenus{display:inline；}
var lastDiv=“”；
函数showDiv（divName）{
//隐藏最后一个div
if（lastDiv）{
document.getElementById（lastDiv）.className=“hiddenMenu”；
}
//如果框的值不是nothing，并且存在具有该名称的对象，则更改该类
if（divName&&document.getElementById（divName））{
document.getElementById（divName）.className=“visibleMenu”；
lastDiv=divName；
}
}
T恤
选择类型&hellip；
女性
男性



大小
XS
s


大小
XS
s

所以，如果我选择男性S作为我的衬衫。我在服务器中收到值“femaleXS”。但若我选择女性S作为我的衬衫，那个么该值将正确地传递给服务器。只有第一个弹出列表中的值才能正确进入服务器

好的，然后我决定只弹出一个列表，这个列表将包含所有选项。我会根据用户选择的衬衫类型隐藏错误的选项。问题是，我用完了JS技能：）我使用的这个JS代码是我从中获得的

帮帮我。我想一个带有隐藏值的下拉列表是最好的选择，但我不知道怎么做：P

您的javascript代码可以简单得多，但要回答您的问题，请添加：

document.getElementById('shirtsize' + lastDiv).disabled = true;

之后：

document.getElementById(lastDiv).className = "hiddenMenu";

document.getElementById(divName).className = "visibleMenu";

并加上：

document.getElementById('shirtsize' + divName).disabled = false;

之后：

document.getElementById(lastDiv).className = "hiddenMenu";

document.getElementById(divName).className = "visibleMenu";

然后将禁用添加到两个隐藏的选择标记

比如：

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

您是否愿意使用类似jQuery的JavaScript库。这会让你的生活变得无比轻松。另外，Knockout.js主要是为了这个目的而定义的。使用jQuery这样的js库很好，谢谢你提供关于Knockout.js的提示。非常感谢！这解决了我的问题。如果你觉得无聊，请毫不犹豫地简化我使用的JS代码：P