多個下拉菜單的純JavaScript顯示/隱藏

Question

我將嘗試保持這種簡單性，嘗試創建一個表單，該表單完成后將被打印，在我想要3-4個帶有yes或no選項的下拉列表的表單上，某些下拉列表將打開下一個隱藏的表單。 div上的表格，無論答案是什么，如果答案是肯定的，其他人都會打開特定的部分。

是的，我不能使用PHP或Jquery必須使用純JavaScript

<!DOCTYPE html>
<html>

<body>

<select  onchange="showHideInput(this)">
<option value="0" ></option>
    <option value="1" >Yes</option>
    <option value="2">No</option>
</select>

<select onchange="showHideInput(this)">
<option value="3" ></option>
    <option value="4" >Yes</option>
    <option value="5">no</option>
</select>

<div  id="dropone" style="display:none;">`enter code here`
     words</label>
    <div >
        <input id="a" type="text" name="b" value="" />
    </div>

<div  id="droptwo" style="display:none;">
     more words</label>
    <div >
        <input id="a" type="text" name="b" value="" />
    </div>



</body>

<script>
function showHideInput(sel) {
    var value = sel.value; 
    if(value==1)
        document.getElementById('dropone').style.display = 'block';
    if(value==2)
            document.getElementById('dropone').style.display = 'none';
if(value==4)
        document.getElementById('droptwo').style.display = 'block';
    if(value==5)
        document.getElementById('droptwo').style.display = 'none';


};
</script>
</html>

現在，我承認我並不是最擅長的事情，但是我的問題是我只能使它與此處的功能稍作工作，但如果答案是肯定的，那么dropone僅允許droptwo工作，但我希望稍后再進行答案是否定的時候工作。

任何幫助都非常歡迎！

Answer 1

1.您的開閉標簽不匹配，dropone在dropone中。 2.如果您硬編碼該值，那么將其擴展到3-4個下拉列表並不是很好，所以我對代碼進行了一些重構

 function showHideSwitcher(elementIdToShow) { return { showHideInput: function(sel, showOnValue) { var currentValue = sel.value; if (currentValue === showOnValue + "") { document.getElementById(elementIdToShow).style.display = 'block'; } else { document.getElementById(elementIdToShow).style.display = 'none'; } } } } var dropone = showHideSwitcher("dropone"); var droptwo = showHideSwitcher("droptwo");

 <select onchange="dropone.showHideInput(this, 1)"> <option value="0" ></option> <option value="1" >Yes</option> <option value="2">No</option> </select> <select onchange="droptwo.showHideInput(this, 4)"> <option value="3" ></option> <option value="4" >Yes</option> <option value="5">no</option> </select> <select class="dropOneAlter" onchange="dropone.showHideInput(this, 1)"> <option value="0" ></option> <option value="1" >Yes</option> <option value="0">no</option> </select> <select class="dropTwiAlter" onchange="droptwo.showHideInput(this, 'T')"> <option value="F" ></option> <option value="T" >Yes</option> <option value="0">no</option> </select> <div id="dropone" style="display:none;"> <label>`enter code here` words </label> <div> <input id="a" type="text" name="b" value="" /> </div> </div> <div id="droptwo" style="display:none;"> <label>more words</label> <div> <input id="a" type="text" name="b" value="" /> </div> </div>

Answer 2

我不確定您要問的是什么，但是如果我認為您的大多數問題都可以通過在每個函數調用的開始隱藏元素來解決。 嘗試用以下代碼替換script標記中的代碼：

<script>
function showHideInput(sel) {
    var value = sel.value;
    document.getElementById('dropone').style.display = 'none';
    document.getElementById('droptwo').style.display = 'none';
    if(value==1)
        document.getElementById('dropone').style.display = 'block';
    if(value==2)
            document.getElementById('dropone').style.display = 'none';
    if(value==4)
            document.getElementById('droptwo').style.display = 'block';
    if(value==5)
            document.getElementById('droptwo').style.display = 'none';
};
</script>

看看是否有幫助。

多個下拉菜單的純JavaScript顯示/隱藏

問題描述

2 個解決方案

解決方案1
2 已采納 2017-03-22 18:17:40

解決方案2
1 2017-03-22 17:54:08

多個下拉菜單的純JavaScript顯示/隱藏

問題描述

2 個解決方案

解決方案1 2 已采納 2017-03-22 18:17:40

解決方案2 1 2017-03-22 17:54:08

解決方案1
2 已采納 2017-03-22 18:17:40

解決方案2
1 2017-03-22 17:54:08