尝试但无法创建多个隐藏的HTML <select>下拉列表

Question

我正在尝试创建一个提交表单，该表单将允许我的用户创建资产注册列表，并且试图获取位置字段的输入。 但是，用户必须首先选择建筑物，然后选择地板，然后最后选择房间。

我可以在单个元素中将所有位置都包含为，但是列表将是庞大且丑陋的。 此外，房间名称在各个站点之间相似，因此最好将它们放在单独的元素中。

我希望用户首先从下拉菜单中选择建筑物。 然后，我希望根据建筑物的选择在其下方显示另一个下拉菜单。 一旦他们选择了楼层选择，我便希望出现第三个选择下拉菜单，然后将要求他们提供房间（同样取决于上一个选择元素的选项）。

我可以使用if ... else函数显示一个隐藏的选择列表，并在块/无之间切换，但是我似乎无法利用相同的技术来返回（以前）隐藏的值选择列表。

我已经包含了一些原始代码。 我对javascript不太有经验，所以我刚刚创建了一个简单的if ... else语句-一旦我能将这种概念证明弄清楚，就计划使用switch语句。

<script>
    function locCheck(choice) {
        if (choice.value == "195"){
    document.getElementById("floor").style.display = "block";
        }
        else {
    document.getElementById("195").style.display = "none";
            }
    }
    </script>

    <script>
    function sublocCheck(choice) {
        if (choice.value == "Ground Floor"){
    document.getElementById("room").style.display = "block";
        }
        else {
            document.getElementById("room").style.display = "none";
            }
    }
    </script>


</head>
<body>
    <div id="building">
        <span>site*</span>
        <div>
            <select onchange='locCheck(this);'>
            <option value="">-- Select A Site --</option>
            <option value="195">195  </option>
            <option value="123">123  </option>
            <option value="8">8  </option>
            <option value="Off-Site">Off-Site</option>
            </select>
        </div>
    </div>

    <div id="floor" style="display: none;">
                  <span>Floor*</span>
           <div>
            <select onchange="sublocCheck(sl);"> 
            <option value="">-- Select A  Floor --</option>
            <option value="Ground Floor"> Ground Floor</option>
            <option value="First Floor"> First Floor</option>
            <option value="Basement Floor"> Basement Floor</option>
            </select>
                  </div>
    </div>

    <div id="room" style="display: none;" >
                  <span>room*</span>
           <div>
            <select> 
            <option>-- Select A room --</option>
            <option>room1</option>
            <option>room2</option>
            <option>room3</option>
            </select>
                  </div>
            </div>
</body>

建筑物（始终可见）

楼层（已隐藏，只能通过建筑物列表显示/隐藏）

房间（被隐藏，只能按楼层或建筑物列表显示/隐藏）

如果不清楚，我很乐意进一步解释。 已经很晚了，我只想看一眼我的代码。

提前致谢，

大号

Answer 1

您的函数调用错误。 将其修复为onchange="sublocCheck(this);" 它将解决您的问题。

第二个问题是locCheck的else语句，显示内容不应该转到id = floor而不是id = 195

顺便说一句，重新考虑您的方法。 如果取消选择195，则地板下拉菜单将隐藏。 那么您将无法隐藏房号下拉菜单。

 <head> <script> function locCheck(choice) { if (choice.value == "195"){ document.getElementById("floor").style.display = "block"; } else { document.getElementById("floor").style.display = "none"; } } </script> <script> function sublocCheck(choice) { if (choice.value == "Ground Floor"){ document.getElementById("room").style.display = "block"; } else { document.getElementById("room").style.display = "none"; } } </script> </head> <body> <div id="building"> <span>site*</span> <div> <select onchange='locCheck(this);'> <option value="">-- Select A Site --</option> <option value="195">195 </option> <option value="123">123 </option> <option value="8">8 </option> <option value="Off-Site">Off-Site</option> </select> </div> </div> <div id="floor" style="display: none;"> <span>Floor*</span> <div> <select onchange="sublocCheck(this);"> <option value="">-- Select A Floor --</option> <option value="Ground Floor"> Ground Floor</option> <option value="First Floor"> First Floor</option> <option value="Basement Floor"> Basement Floor</option> </select> </div> </div> <div id="room" style="display: none;" > <span>room*</span> <div> <select> <option>-- Select A room --</option> <option>room1</option> <option>room2</option> <option>room3</option> </select> </div> </div> </body>

尝试但无法创建多个隐藏的HTML <select>下拉列表

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-09-10 21:39:21

尝试但无法创建多个隐藏的HTML <select>下拉列表

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-09-10 21:39:21

解决方案1
0 已采纳 2019-09-10 21:39:21