Скрытие опции, если она выбрана в другом окне выбора JavaScript

Я хочу скрыть параметр в поле выбора, если параметр уже выбран в другом поле. Я не уверен, где проблема в моем коде, я пытался запустить его на разных редакторах, это не сработало. Вот мой код:

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

-1
задан Shakespear 17 January 2019 в 10:06
поделиться

2 ответа

Я не знаю, что не так с вашим кодом, логика кажется запутанной. Вы не можете надежно скрыть параметры, установив для дисплея значение «нет», в некоторых браузерах они остаются видимыми. Если бы это было так просто, жизнь была бы легкой.

Вы можете скрыть опции, удалив их из списка, но затем вы должны запомнить, откуда они появились, чтобы вы могли вернуть их обратно при изменении выбора.

Далее, каждый раз, когда выбирается какой-либо параметр, если он сохраняется, он возвращается и тот, который соответствует выбранному параметру, удаляется. Если выбран первый вариант, сохраненный просто возвращается, ничего не удаляется.

Это зависит только от двух селекторов, имеющих одинаковое значение класса, они могут быть связаны каким-то другим значением (например, свойством 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>

0
ответ дан RobG 17 January 2019 в 10:06
поделиться

Сначала определите, какой выбор должен быть отфильтрован, затем выполните циклическое переключение между отображением настроек параметров, чтобы сначала заблокировать (отменить предыдущий фильтр), а затем, если значение параметра соответствует выбранному значению, установить его на отсутствие.

Редактировать Вышеуказанный метод работает не во всех браузерах. Лучший способ HTML5 - установить и удалить скрытый атрибут. Я обновил фрагмент.

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>

0
ответ дан Arleigh Hix 17 January 2019 в 10:06
поделиться