多重下拉菜單中的JavaScript

綁對方現在我有三個下拉菜單。頁面加載時僅顯示第一個下拉菜單。一旦選擇了該菜單中的選項，就會出現第二個菜單。我正在嘗試對第二個和第三個菜單執行相同的操作，但它不起作用。下面是我的HTML和JS代碼，我做錯了什麼？多重下拉菜單中的JavaScript

function choose() { 
 
    if (document.getElementById('filter1').value == 'genre') { 
 
    document.getElementById('items').style.display = 'block'; 
 
    document.getElementById('items2').style.display = 'none'; 
 
    document.getElementById('items3').style.display = 'none'; 
 
    document.getElementById('items4').style.display = 'none'; 
 

 

 
    } else if (document.getElementById('filter1').value == 'year') { 
 
    document.getElementById('items').style.display = 'none'; 
 
    document.getElementById('items2').style.display = 'block'; 
 
    document.getElementById('items3').style.display = 'none'; 
 
    document.getElementById('items4').style.display = 'none'; 
 
    } else if (document.getElementById('filter1').value == 'director') { 
 
    document.getElementById('items').style.display = 'none'; 
 
    document.getElementById('items2').style.display = 'none'; 
 
    document.getElementById('items3').style.display = 'block'; 
 
    document.getElementById('items4').style.display = 'none'; 
 
    } else if (document.getElementById('filter1').value == 'actor') { 
 
    document.getElementById('items').style.display = 'none'; 
 
    document.getElementById('items2').style.display = 'none'; 
 
    document.getElementById('items3').style.display = 'none'; 
 
    document.getElementById('items4').style.display = 'block'; 
 
    } else { 
 
    document.getElementById('items').style.display = 'none'; 
 
    document.getElementById('items2').style.display = 'none'; 
 
    document.getElementById('items3').style.display = 'none'; 
 
    document.getElementById('items4').style.display = 'none'; 
 
    } 
 

 

 
} 
 

 
function check() { 
 
    if (document.getElementById('items').style.display == 'block') { 
 
    document.getElementById('filter').style.display = 'block'; 
 
    } 
 
}

<div class="col-md-4"> 
 
    <div class="dropdown"> 
 
    <select id="filter1" name="filter1" onclick="choose()"> 
 
    <option value=NULL>Filter 1</option> 
 
    <option value="genre">Genre</option> 
 
    <option value="year">Year</option> 
 
    <option value="director">Director name</option> 
 
    <option value="actor">Actor name</option> 
 
    <!-- Insert function to call server --> 
 
    </select> 
 

 
    </div> 
 

 

 
</div> 
 

 

 
<div class="col-md-4"> 
 
    <div class="dropdown"> 
 
    <select id="items" name="items" style="display: none"> 
 
    <option value=NULL>Filter 2</option> 
 
    <option value="year">Year</option> 
 
    <option value="director">Director name</option> 
 
    <option value="actor">Actor name</option> 
 
    </select> 
 
    <select id="items2" name="items" style="display: none"> 
 
    <option value=NULL>Filter 2</option> 
 
    <option value="genre">Genre</option> 
 
    <option value="director">Director name</option> 
 
    <option value="actor">Actor name</option> 
 
    </select> 
 
    <select id="items3" name="items" style="display: none"> 
 
    <option value=NULL>Filter 2</option> 
 
    <option value="genre">Genre</option> 
 
    <option value="year">Year</option> 
 
    <option value="actor">Actor name</option> 
 
    </select> 
 
    <select id="items4" name="items" style="display: none"> 
 
    <option value=NULL>Filter 2</option> 
 
    <option value="genre">Genre</option> 
 
    <option value="year">Year</option> 
 
    <option value="director">Director name</option> 
 
    </select> 
 

 

 
    </div> 
 
</div> 
 

 
<div class="col-md-4"> 
 
    <div class="dropdown"> 
 
    <select id="filter" name="filter" style="display: none"> 
 
    <option value=NULL>Filter 3</option> 
 
    <option value="2">Director name</option> 
 
    <option value="3">Actor name</option> 
 
    </select> 
 

 
    </div> 
 
</div>

來源

2017-04-21 Subhaa Chandar

定義「不工作」。它在哪裏/具體如何失敗？當你調試這個時，它會出錯哪裏？發生了什麼，你期望發生什麼？ – David

沒有點擊事件綁定到其他3個選擇。 – Shilly

另外一個建議：如果你更換IDS項目，items2，items3，items4到dropdown_genre，dropdown_year，dropdown_director和dropdown_genre，你的if/else塊可以完全去除，因爲的document.getElementById（ '過濾器1'）的'價值值'會給你顯示下拉的ID，而不是單獨檢查每個值。 – Shilly

你確定這是不是工作？我注意到，您在#items，＃items2，＃items3和＃items4上使用標籤「filter 2」作爲默認選項，這可能會造成混淆。

我試着用這個JSFiddle，它似乎工作。

所做的唯一修改是：

我加了一些日誌
我用window.choose = function choose() {...}。但是這不應該成爲一個問題，因爲選擇函數應該已經附加到窗口對象。

來源

2017-04-21 12:57:41 BabarConnect

其實我有疑問，你是否需要只顯示兩個下拉菜單，或者是否每次前一個下拉菜單都顯示新的下拉菜單？ – BabarConnect

只有結合到第一下拉的事件：<select id="filter1" name="filter1" onclick="choose()">

沒有結合到其他選擇的事件。

所以您需要將相同的功能添加到第二個下拉以及得到它的工作。正如所寫的，邏輯上代碼沒有任何問題：一旦第一個下拉列表發生變化，顯示第二個下拉列表中的一個下拉列表，一旦其他下拉列表發生更改，就不會執行任何操作。

來源

2017-04-21 13:11:57 Shilly

多重下拉菜單中的JavaScript

回答

相關問題