Блог

Главная - Вопросы по программированию - Применение фильтров на основе классов div

Применение фильтров на основе классов div

#javascript

Вопрос:

У меня есть форма, которая позволяет пользователю выбрать опцию из выпадающего списка

 <form action="/create_tasks/" name="form2" , id="form2" method="post" class="row row-cols-lg-auto g-3 align-items-center">
  <input type="hidden" name="csrfmiddlewaretoken" value="F9Xrs4SIcjDS3yVMCH1hbAB1p3encpExp14ynCZV5jsDgjcD41qFoVeDn4wtpGr8">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected value='all'>All </option>
      <option value=SQL>SQL</option>
      <option value=Apache Spark>Apache Spark</option>
      <option value=Python>Python</option>
      <option value=Linux>Linux</option>
    </select>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">filter</button>
  </div>
</form>

У меня есть дивы внизу, вот так:

 <div class="card mb-2 sh-10 sh-md-8 Python ">
</div>
<div class="card mb-2 sh-10 sh-md-8 Python ">
</div>

Если пользователь выбирает значение из выпадающего списка, я хочу показывать только дивы с этим классом (например , выберите Python, показывать только дивы python). Если они выберут «все», я хочу показать им все

У меня была игра с некоторыми вариантами, но я не могу заставить ее работать. Кто-нибудь может указать мне правильное направление, пожалуйста?

Комментарии:

1. Можете ли вы поделиться тем, что вы пробовали до сих пор?

2. Я попытался следовать этому: w3schools.com/howto/howto_js_toggle_hide_show.asp — но я не уверен, как динамически передавать значение формы, чтобы скрыть или показать его?

Ответ №1:

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

 const select = document.getElementById('select');
const showSelected = name => {
    document.querySelectorAll('.form-option').forEach(card => {
        card.style.display = name === 'all' ? 'block' : 'none';
        if (name !== 'all' amp;amp; card.classList.contains(name.replace(' ', '-'))) {
            card.style.display = 'block';
        }
    });
}

showSelected('all');
select.addEventListener('input', () => {
    showSelected(select.value);
}); 
 <select id="select">
    <option selected value='all'>All</option>
    <option value="SQL">SQL</option>
    <option value="Apache Spark">Apache Spark</option>
    <option value="Python">Python</option>
    <option value="Linux">Linux</option>
</select>

<div class="form-option SQL">SQL</div>
<div class="form-option Apache-Spark">Apache Spark</div>
<div class="form-option Python">Python</div>
<div class="form-option Linux">Linux</div>

Комментарии:

1. Большое спасибо!

Метки: