Случайный вопрос

Как мне работать с тегом html select с JS

2

сначала я новичок в JS и попытался составить список с помощью тега select.

Чтобы быть конкретным, я хотел сделать функцию, которая, если я выберу опцию «2014» из нескольких опций, тогда диаграмма будет показывать только один div с именем класса «2014», а иначе не будет отображаться. Но почему-то это не сработало, как я ожидал, может ли кто-нибудь помочь мне с этой проблемой? спасибо

const yearsOption = document.querySelector(".select");

yearsOption.addEventListener("change", filterYear());

function filterYear(e) {
  const years = yearsOption.childNodes;
  years.forEach(function (year) {
    switch (e.target.value) {
      case "2014":
        if (year.classList.contains("2014")) {
          year.style.display = "flex";
        } else {
          year.style.display = "none";
        }
        break;
      case "2015":
        if (year.classList.contains("2015")) {
          year.style.display = "flex";
        } else {
          year.style.display = "none";
        }
        break;
      case "2016":
        if (year.classList.contains("2016")) {
          year.style.display = "flex";
        } else {
          year.style.display = "none";
        }
        break;
      case "2017":
        if (year.classList.contains("2017")) {
          year.style.display = "flex";
        } else {
          year.style.display = "none";
        }
        break;
      case "2018":
        if (year.classList.contains("2018")) {
          year.style.display = "flex";
        } else {
          year.style.display = "none";
        }
        break;
    }
  });
}
    <div class="years_option">
      year:
      <select name="years" class="select">
        <option value="2014" class="2014">2014</option>
        <option value="2015" class="2015">2015</option>
        <option value="2016" class="2016">2016</option>
        <option value="2017" class="2017">2017</option>
        <option value="2018" class="2018">2018</option>
      </select>
    </div>

    <div class="table">
      <div class="2014" data-include-path="/data/2014batters.htm">2014</div>
      <div class="2015" data-include-path="/data/2015batters.htm">2015</div>
      <div class="2016" data-include-path="/data/2016batters.htm">2016</div>
      <div class="2017" data-include-path="/data/2017batters.htm">2017</div>
      <div class="2018" data-include-path="/data/2018batters.htm">2018</div>
    </div>

  • 1
    Прежде всего, addEventListener("change", filterYear()) должен быть addEventListener("change", filterYear) - вам нужно передать ссылку на объект функции, а не возвращаемое значение вызова функции. (Ваша функция даже не имеет явного возвращаемого значения, но первая версия имела бы смысл, если бы само это возвращаемое значение было функцией, которая затем стала бы той, которую фактически запускает обработчик событий.)
  • 0
    Трудно понять, что «не сработало», поскольку вы этого не сказали, но, по крайней мере, при выполнении вашего кода он говорит TypeError: Cannot read property 'target' of undefined . Ошибка находится в e.target.value . Я считаю, что проблема в addEventListener("change", filterYear()) вместо addEventListener("change", filterYear) (не вызывайте функцию, просто передайте ее как обработчик событий)
  • 0
    Проверит developer.mozilla.org/en-US/docs/Web/API/Node/childNodes#notes - что один возвращает больше узлов, чем вы на самом деле хотите здесь, различные из них , чем вы, вероятно , ожидает.
  • 0
    И вообще, обратите внимание на ошибки, о которых вам сообщает консоль браузера (или здесь консоль сниппета).
  • 0
    спасибо, ваш ответ мне очень помог.
Теги:
javascript
html
CodeFix

2 ответа

0

Этот JS должен работать, сделал это с помощью document.querySelectorAll () :

const yearsOption = document.querySelector(".select");

yearsOption.addEventListener("change", function(e) {
  const year = e.target.value;

  document.querySelectorAll('.table > div').forEach(function(item) {
    item.style.display = (item.classList.contains(year) ? 'flex' : 'none');
  })
});
Поделиться
Источник
  • 0
    это все еще не работает, но спасибо !!
0

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

const divs=[...document.querySelectorAll(".table div")],
      sel=document.querySelector(".select");
      sel.addEventListener("change",ev=>divs.forEach(d=>
        d.classList.toggle("hidden",!d.classList.contains(ev.target.value))
      ));
.hidden {display:none}
<div class="years_option">
  year:
  <select name="years" class="select">
    <option value="2014" class="2014">2014</option>
    <option value="2015" class="2015">2015</option>
    <option value="2016" class="2016">2016</option>
    <option value="2017" class="2017">2017</option>
    <option value="2018" class="2018">2018</option>
  </select>
</div>

<div class="table">
  <div class="2014" data-include-path="/data/2014batters.htm">2014</div>
  <div class="2015 hidden" data-include-path="/data/2015batters.htm">2015</div>
  <div class="2016 hidden" data-include-path="/data/2016batters.htm">2016</div>
  <div class="2017 hidden" data-include-path="/data/2017batters.htm">2017</div>
  <div class="2018 hidden" data-include-path="/data/2018batters.htm">2018</div>
</div>

Поделиться
Источник
  • 0
    Это не то, что я хотел сделать. Но это из-за моего отсутствия описания. Благодарность!

Другие вопросы

  • Выберите элемент, необходимый в vuejs, не работает1 ответ

    Я новичок в vuejs. Я хочу сделать элемент выбора из раскрывающегося списка обязательным, я попытался добавить требуемый атрибут, как в приведенном ниже коде. <v-select :items="fournisseursByClient" ...

  • как добавить ссылки на липкую панель навигации1 ответ

    Я попытался добавить фоновое изображение для своего веб-сайта django, и это вообще не сработало. Я использую этот ответ из stackoverflow, а также ссылку на вопрос stackoverflow. Но это не сработало. А также я переношу изменения в базу данных. добавить фоновое изображение как в методе cssbackground-i...

  • Как заблокировать меню боковой панели, скрытое при обновлении страницы1 ответ

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

  • Если, то Заявления в распознавании речи HTML [закрыто]1 ответ

    Закрыто. Этот вопрос требует подробностей отладки . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме Stack Overflow. Закрыт в прошлом месяце . Уточните этот вопрос Итак, я пытаюсь сделать голосового помощника html, и я борюсь с оп...

  • Как создать html-страницу со ссылкой [закрыто]1 ответ

    Закрыто . Этот вопрос должен быть более конкретным . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он фокусировался только на одной проблеме, отредактировав этот пост . Закрыт в прошлом месяце . Уточните этот вопрос Как разместить видео ключи на моем...

  • Как добавить проверку ввода в React?2 ответ

    У меня простая форма, в которойfirstName а такжеlastName . <label htmlFor="firstName">First Name: </label> <input type="text" className="form-control" id="firstName" name="firstName" value={basicDet...

  • Фильтровать видео YouTube по категории1 ответ

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

  • Удалить текст из строки Javascript1 ответ

    Ниже приведено изображение ответа, который я получаю при отправке формы с неправильным адресом электронной почты. [IMG_OUR_ID=74.jpg] Я хочу удалить слово сообщение: & фигурные скобки вокруг строки из этого ответа. Я пробую следующее:$('#registerStatus').text(response.replace('message:', '')) Н...

  • Остановить воспроизведение видео YouTube при закрытии CUSTOM модального окна1 ответ

    Привет, классные Overflowers. Мне удалось реализовать красивый, простой модальный файл, который отображает видео на YouTube при нажатии на эскиз img. Моя проблема в том, что я не могу заставить видео останавливаться после закрытия модального окна. Я пробовал здесь много идей и скриптов, но многие из...

  • Оператор if в jQuery и HTML?2 ответ

    Я успешно запускаю следующий скрипт: он обновляет текст каждые 3 секунды.<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(function() { window.setInterval(function() { loadNewText() }, 3000) function loadNewText...

CodeFix
Для будущих программистов
Цитата дня

"Завидую тестировщикам: все хотят с ними дружить."

Эндрю Таненбаум