嘗試但無法創建多個隱藏的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