隐藏第二个 <select> 列表中的元素

Question

在我的页面上，有两个下拉列表。如果在另一个列表中选择了镜像选项，我想要做的是在一个列表中隐藏一个元素。它现在几乎完全按照我想要的方式运行，除了它将元素隐藏在自己的列表中而不是其他列表中。

我尝试在最后两个 if 语句中切换变量，但这只会让选项永远消失。 我不知道出了什么问题。

//hidden element in dropdown list 1
var option_to_hide1;
//hidden element in dropdown list 2
var option_to_hide2;

function option_hide(list) {
  //grab the team selected by the user in the dropdown list
  var team_selected = document.getElementById("team_compare" + list).value;

  //if an element is currently hidden, unhide it
  if (typeof(option_to_hide1) != "undefined" && option_to_hide1 !== null && list == 2) {
    option_to_hide1.style.display = 'block';
  } else if (typeof(option_to_hide2) != "undefined" && option_to_hide2 !== null && list == 1) {
    option_to_hide2.style.display = 'block';
  }
  //select the element to hide and then hide it
  if (list == 1) {
    option_to_hide2 = document.getElementById(team_selected + list);
    option_to_hide2.style.display = 'none';
  }
  if (list == 2) {
    option_to_hide1 = document.getElementById(team_selected + list);
    option_to_hide1.style.display = 'none';
  }
}

<div id="compare_form">
  <form action="">
    <select name="team_compare1" id="team_compare1">
      <option value="" disabled selected>Please select a team...</option>
      <option id="DP1" value="DP" onclick="option_hide(1)">DP</option>
      <option id="NiP1" value="NiP" onclick="option_hide(1)">NiP</option>
      <option id="Portugal1" value="Portugal" onclick="option_hide(1)">Portugal</option>
      <option id="Serbia1" value="Serbia" onclick="option_hide(1)">Serbia</option>
      <option id="VG1" value="VG" onclick="option_hide(1)">VG</option>
    </select>
    <select name="team_compare2" id="team_compare2">
      <option option value="" disabled selected>Please select a team...</option>
      <option id="DP2" value="DP" onclick="option_hide(2)">DP</option>
      <option id="NiP2" value="NiP" onclick="option_hide(2)">NiP</option>
      <option id="Portugal2" value="Portugal" onclick="option_hide(2)">Portugal</option>
      <option id="Serbia2" value="Serbia" onclick="option_hide(2)">Serbia</option>
      <option id="VG2" value="VG" onclick="option_hide(2)">VG</option>
    </select>
  </form>
</div>

这是一个 JSFiddle，我的代码说明了这个问题。 https://jsfiddle.net/3dv89anj/

Answer 1

首先，您必须删除选项元素上的onclick="option_hide(1)"。选项标签上的Onclick 在其他浏览器上没有seem to work。 在select 标签上使用onchange 而不是onclick。

例如

<select name="team_compare1" id="team_compare1" onchange="option_hide(1)">

问题是您隐藏了所选下拉列表中的选项，因为您是根据所选列表而不是相反的列表来定位元素。

这个：

if (list == 1) {
    // since list = 1, then it will hide the element on list1
    option_to_hide2 = document.getElementById(team_selected + list);
    option_to_hide2.style.display = 'none';
}

您必须将其更改为：

if (list == 1) {
    option_to_hide2 = document.getElementById(team_selected + 2);
    option_to_hide2.style.display = 'none';
}

Fiddle