尝试但未能创建多个隐藏的 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.

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.

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

如果不清楚，我很乐意进一步解释。已经很晚了我只是想要一双新的眼睛来审视我的代码。

提前致谢，

L

Answer 1

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

第二个问题是 locCheck 显示的 else 语句 none 应该去 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> 下拉列表

Trying but failing to create multiple hidden HTML <select> dropdown lists

html

javascript

jquery

html-select