Выпадающий мультиселект на HTML, CSS и JavaScript

Выпадающий мультиселект на HTML, CSS и JavaScript

Выпадающий мультиселект на HTML, CSS и JavaScript

Доброго времени суток! Как известно, по умолчанию, HTML-тег select с атрибутом multiply в десктопным браузерах, как правило отображается в виде
списка элементов, которые нельзя свернуть/развернуть. Однако, часто, требуется, чтобы мультиселект отображался в свернутом виде, как и обычный select.
Далее мы рассмотрим один из вариантов создания выпадающего мультиселекта
Для создания сворачиваемого мультиселекта в HTML, мы будем использовать следующую комбинацию HTML, CSS и немного JavaScript.

Код:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>

    .accordion {

      display: flex;

      flex-direction: column;

    }



    .section {

      border: 1px solid #ccc;

      margin-bottom: 5px;

    }



    .section-header {

      background-color: #f1f1f1;

      padding: 10px;

      cursor: pointer;

    }



    .section-body {

      display: none;

      padding: 10px;

    }



    select {

      width: 100%;

      padding: 5px;

      box-sizing: border-box;

    }

  </style>

</head>

<body>



<div class="accordion">

  <div class="section">

    <div class="section-header" onclick="toggleSection('section1')">Выбор типа 1</div>

    <div class="section-body" id="section1">

      <select multiple>

        <option value="1">Выбор 1.1</option>

        <option value="2">Выбор 1.2</option>

        <option value="3">Выбор 1.3</option>

      </select>

    </div>

  </div>



  <div class="section">

    <div class="section-header" onclick="toggleSection('section2')">Выбор типа 2</div>

    <div class="section-body" id="section2">

      <select multiple>

        <option value="4">Выбор 2.1</option>

        <option value="5">Выбор 2.2</option>

        <option value="6">Выбор 2.3</option>

      </select>

    </div>

  </div>

</div>



<script>

  /**

   * переключаем видимость элемента при клике по заголовку раздела

   */

  function toggleSection(sectionId) {

    const section = document.getElementById(sectionId);

    section.style.display = section.style.display === 'none' ? 'block' : 'none';

  }

</script>



</body>

</html>

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

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий