Question

如果已经在另一个框中选择了该选项，我想在选择框中隐藏该选项。我不确定代码中的问题在哪里，我尝试在其他编辑器上运行它没有用。这是我的代码：

<html>
  <head>
    <title>Currency Converter</title>
  </head>

  <body>
    <script langauge="javascript">
      function CheckDropDowns() {
        ListOfSelectedCountires = [];
        for (CountryNumber = 0; CountryNumber < 3; CountryNumber++) {
          ListOfSelectedCountires[CountryNumber] = document.getElementById("country" + (CountryNumber + 1)).value;
        }
        for (algoritmCountryNumber = 0; algoritmCountryNumber < 3; algoritmCountryNumber++) {
          for (countryOptions = 1; countryOptions < 5; countryOptions++) {
            document.getElementById("country" + (algoritmCountryNumber + 1)).options[countryOptions].style.display = "block";
            for (processedOption = 0; processedOption < 3; processedOption++) {
              if (document.getElementById("country" + (algoritmCountryNumber + 1).options[countryOptions].value == ListOfSelectedCountires[processedOption]) {
                  document.getElementById("country" + (algoritmCountryNumber + 1)).options[countryOptions].style.display = "none";
                }
              }
            }
          }
        }
    </script>
    <section>
      <select id="country1" onchange="CheckDropDowns()">
        <option value="">Choose</option>
        <option value="1">Australia</option>
        <option value="2">Indonesian Rupiah</option>
        <option value="3">Chinese Yaun</option>
        <option value="4">Japanese Yen</option>
      </select>
      Convert to
      <select id="country2" onchange="CheckDropDowns()">
        <option value="">Choose</option>
        <option value="1">Australia</option>
        <option value="2">Indonesian Rupiah</option>
        <option value="3">Chinese Yaun</option>
        <option value="4">Japanese Yen</option>
      </select>
    </section>
  </body>
</html>

Answer 1

首先确定需要过滤的选择，然后循环浏览选项设置显示以首先阻止（以撤消上一个过滤器），然后，如果选项的值与所选值设置相匹配，则显示为无。

修改上面的方法不适用于所有浏览器。更好的HTML5方法是设置和删除hidden属性。我已经更新了代码段。

window.CheckDropDowns = function(thisSelect) {
  var otherSelectId = ("country1" == thisSelect.id) ? "country2" : "country1";
  var otherSelect = document.getElementById(otherSelectId);

  for (i = 0; i < otherSelect.options.length; i++) {
    //otherSelect.options[i].style.display = 'block';
    otherSelect.options[i].removeAttribute('hidden');
    if (otherSelect.options[i].value == thisSelect.value) {
      //otherSelect.options[i].style.display = 'none';
      otherSelect.options[i].setAttribute('hidden', 'hidden');
    }
  }
}

<section>

  <select id="country1" onchange="CheckDropDowns(this)">
    <option value="">Choose</option>
    <option value="1">Australia</option>
    <option value="2">Indonesian Rupiah</option>
    <option value="3">Chinese Yaun</option>
    <option value="4">Japanese Yen</option>
  </select>
  Convert to
  <select id="country2" onchange="CheckDropDowns(this)">
    <option value="">Choose</option>
    <option value="1">Australia</option>
    <option value="2">Indonesian Rupiah</option>
    <option value="3">Chinese Yaun</option>
    <option value="4">Japanese Yen</option>
  </select>

</section>

Answer 2

我不知道您的代码出了什么问题，逻辑似乎很混乱。通过将选项的 display 设置为“ none”，您无法可靠地隐藏选项，在某些浏览器中它们仍然可见。如果真是那样简单，生活就会轻松。

您可以通过从列表中删除选项来隐藏选项，但是您必须记住它们的来源，以便在更改选项时将其放回。

以下，每次选择一个选项时，如果存储了一个选项，则将其放回，并删除与所选选项匹配的一个选项。如果选择了第一个选项，则仅将存储的选项放回原处，不会删除任何内容。

这仅取决于具有相同类值的两个选择，它们可能与其他值（例如data- *属性）相关。

希望评论足够了。

var matchSelected = (function() {
  // Store for "hidden" node
  var nodeStore = {
    sourceElement: null,
    node: document.createDocumentFragment(),
    index: null
  };

  return function(evt) {
    // Get the element that got the event
    var tgt = this;
    // If there's a stored option, put it back
    if (nodeStore.sourceElement) {
      let sel = nodeStore.sourceElement;
      sel.insertBefore(nodeStore.node.firstChild, sel.options[nodeStore.index]);
      nodeStore.sourceElement = null;
      nodeStore.node = document.createDocumentFragment();
      nodeStore.index = null;
    }
    // If the selected option is the first one, stop here
    if (tgt.selectedIndex == 0) return;
    // Get all selects with the same className
    var sels = document.querySelectorAll('.' + this.className);
    // Get the "other" option
    var other = sels[0] == this ? sels[1] : sels[0];
    // Remove and keep the option on the other element that is the same
    // as the selected option on the target element
    nodeStore.sourceElement = other;
    nodeStore.index = tgt.selectedIndex;
    nodeStore.node.appendChild(other.options[tgt.selectedIndex]);
  }
}());

window.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.countrySelect').forEach(
    node => node.addEventListener('change', matchSelected, false)
   );
}, false);

<select id="country1" class="countrySelect">
  <option value="" selected>Choose</option>
  <option value="1">Australia Dollar</option>
  <option value="2">Indonesian Rupiah</option>
  <option value="3">Chinese Yaun</option>
  <option value="4">Japanese Yen</option>
</select>
Convert to
<select id="country2" class="countrySelect">
  <option value="" selected>Choose</option>
  <option value="1">Australia Dollar</option>
  <option value="2">Indonesian Rupiah</option>
  <option value="3">Chinese Yaun</option>
  <option value="4">Japanese Yen</option>
</select>

隐藏一个选项（如果在另一个选择框中选中了该选项）

2 个答案: