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

Question

I'm trying to create a submission form which will allow my users to create an asset register list and I'm trying to get input for a location field. 我正在尝试创建一个提交表单，该表单将允许我的用户创建资产注册列表，并且试图获取位置字段的输入。 The user must first however select a building, then select a floor then finally select a room. 但是，用户必须首先选择建筑物，然后选择地板，然后最后选择房间。

I could include all locations as 's within a single element, however the list would be massive and ugly. 我可以在单个元素中将所有位置都包含为，但是列表将是庞大且丑陋的。 Also, room names are similar across sites so it would be best to keep them in a separate element. 此外，房间名称在各个站点之间相似，因此最好将它们放在单独的元素中。

I would like the user to first select a building from a dropdown menu. 我希望用户首先从下拉菜单中选择建筑物。 I would then like another dropdown menu to appear below that depending on their building choice. 然后，我希望根据建筑物的选择在其下方显示另一个下拉菜单。 Once they select their floor choice I would then like a third select dropdown to appear which will then ask them for the room (again depending on the option from the previous select element). 一旦他们选择了楼层选择，我便希望出现第三个选择下拉菜单，然后将要求他们提供房间（同样取决于上一个选择元素的选项）。

I'm able to show one hidden select list by using an if...else function and simply toggling between block/none but I don't seem to be able to utilise the same technique for the value return on the (previously) hidden select list. 我可以使用if ... else函数显示一个隐藏的选择列表，并在块/无之间切换，但是我似乎无法利用相同的技术来返回（以前）隐藏的值选择列表。

I've included some primitive code. 我已经包含了一些原始代码。 I'm not very experienced with javascript so I've just created a simple if...else statement --with plans to use a switch statement once I can get this proof of concept down. 我对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>

Building (Always visible) 建筑物（始终可见）

Floor (was hidden, can only be shown/hidden by Building list) 楼层（已隐藏，只能通过建筑物列表显示/隐藏）

Room (was hidden, can only be shown/hidden by Floor or Building list) 房间（被隐藏，只能按楼层或建筑物列表显示/隐藏）

If this isn't clear, I'd be glad to explain further. 如果不清楚，我很乐意进一步解释。 It's pretty late and I'd just like a fresh pair of eyes to look at my code. 已经很晚了，我只想看一眼我的代码。

thanks in advance, 提前致谢，

L 大号

Answer 1

Your function call is wrong. 您的函数调用错误。 Fix it to onchange="sublocCheck(this);" 将其修复为onchange="sublocCheck(this);" and it will fix your issue. 它将解决您的问题。

Second Problem is the else statement of locCheck the display none shall go to id=floor not id=195 第二个问题是locCheck的else语句，显示内容不应该转到id = floor而不是id = 195

By the way re-think about your approach. 顺便说一句，重新考虑您的方法。 If you unselect the 195, the floor dropdown will hide. 如果取消选择195，则地板下拉菜单将隐藏。 then you can't hide the room number dropdown. 那么您将无法隐藏房号下拉菜单。

 <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