Форум

Enkille · #1 (**permalink**) 11.09.2016, 21:07

У меня есть два списка (select) с элементами option, каждый из которых имеет value от 1 до 100. Я хочу сделать временное исчезновение из другого списка того option, который был выбран в одной из форм. Чтобы не показывать повторения. Также, если элемент поменялся, то его нужно снова показать.

Подскажите, как это лучше сделать? Пытался делать проверки и скрывать их с помощью hide() (jQuery), но таким образом у меня скрываются один элемент за другим, что совсем не нужно :-) Гуглил, но ничего подобного не нашел, хотя обычно Stackoverflow в помощь.

рони · #2 (**permalink**) 11.09.2016, 22:37

Enkille,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
  <select size="15">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
  </select>
  <select size="15">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
  </select>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var a = document.querySelectorAll("select");
    [].forEach.call(a, function(c, b) {
        b = a[+!b];
        var d = b.querySelectorAll("option");
        c.addEventListener("change", function() {
            b.options.length = 0;
            [].forEach.call(d, function(a) {
                a.value !== c.value && b.appendChild(a)
            })
        })
    })
});
</script>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript