多重下拉菜单中的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

回答

相关问题