javascript

Question

现在我有三个下拉菜单。页面加载时仅显示第一个下拉菜单。选择该菜单中的选项后，将显示第二个菜单。我试图用第二和第三个菜单做同样的事情，但它没有用。下面是我的HTML和JS代码，我做错了什么？

＆＃13;

＆＃13;

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';
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你确定这不起作用吗？我注意到你在#items，＃items2，＃items3和＃items4上使用标签“filter 2”作为默认选项，这可能令人困惑。

我尝试使用此JSFiddle，它似乎有效。

唯一的修改是：

• 我添加了一些日志
• 我使用了window.choose = function choose() {...}。但这不应该是一个问题，因为选择功能应该已经附加到窗口对象。

Answer 2

只有第一个下拉列表绑定了一个事件：<select id="filter1" name="filter1" onclick="choose()">

没有任何事件与其他选择绑定。

因此，您需要在第二个下拉列表中添加相同的功能以使其正常工作。如上所述，代码在逻辑上没有任何问题：在第一个下拉列表更改后显示第二个下拉列表中的一个，并且在更改任何其他下拉列表后不执行任何操作。