Показать сообщение отдельно
  #1 (permalink)  
Старый 29.03.2021, 17:05
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

JS multiselect с кнопками удаления выбранных option

Подскажите, как реализовать что б по option:checked добавлялась нужная кнопка в верхнем блоке, а по её нажатию она бы убиралась из select, ну и выбранный options становился unchecked ? Пока удалось только показывать одну кнопку, а необходим массовый вывод
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      body {
        margin: 0;
      }

      .form_label {
        position: relative;
        min-height: 88px;
      }

      .form_text {
        vertical-align: top;
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: .04em;
        color: #686EA1
      }

      .form_text>sup {
        position: relative;
        top: 0;
        font-size: 13px;
      }

      .field_multiselect {
        position: relative;
        width: 100%;
        display: block;
        border: 1px solid #CDD6F3;
        box-sizing: border-box;
        border-radius: 8px;
        padding: 12px 40px 10px 16px;
        outline-color: #CDD6F3;
      }

      .field_multiselect::placeholder {
        color: #A8ACC9;
      }

      .field_multiselect {
        padding-right: 60px;
      }

      .field_multiselect:after {
        content: "";
        position: absolute;
        right: 14px;
        top: 15px;
        width: 6px;
        height: 16px;
        background: url("../images/svg-icons/two-arrows.svg") 50% 50% no-repeat;
      }

      .multiselect_block {
        position: relative;
        width: 100%;
      }

      .field_select {
        position: absolute;
        top: calc(100% - 2px);
        left: 0;
        width: 100%;
        border: 2px solid #CDD6F3;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-sizing: border-box;
        outline-color: #CDD6F3;
      }

      .field_select[multiple] {
        overflow-y: auto;
      }

      .field_select option {
        display: block;
        padding: 8px 16px;
        width: calc(370px - 32px);
      }

      .field_select option:checked {
        background-color: #ECEFF3;
      }

      .field_multiselect button {
        position: relative;
        padding: 7px 34px 7px 8px;
        background: #EBE4FB;
        border-radius: 4px;
      }

      .field_multiselect button:after {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 16px;
        height: 16px;
        background: url("../images/svg-icons/icon-close.svg") 50% 50% no-repeat;
        background-size: contain;
      }

      .multiselect_label {
        position: absolute;
        top: 1px;
        left: 2px;
        width: 100%;
        height: 44px;
        z-index: 3;
      }

      .field_select {
        display: none;
      }

      input.multiselect_checkbox {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 40px;
        border: none;
        opacity: 0;
      }

      .multiselect_checkbox:checked ~ .field_select {
        display: block;
      }

      .multiselect_checkbox:checked ~ .multiselect_label {
        width: 40px;
        left: initial;
        right: 4px;
        background: #fff url("../images/svg-icons/icon-close.svg") 50% 50% no-repeat;
      }

    </style>
  </head>

  <body>
    <div class="form_label">
      <span class="form_text">Products<sup>*</sup></span>
      <div class="multiselect_block">
        <label for="select-1" class="field_multiselect">Products</label>
        <input id="checkbox-1" class="multiselect_checkbox" type="checkbox">
        <label for="checkbox-1" class="multiselect_label"></label>

        <select id="select-1" class="field_select" name="products" multiple style="height: calc(4 * 38px)">
          <option value="Applications">Applications</option>
          <option value="Parental controls">Parental controls</option>
          <option value="VPN">VPN</option>
          <option value="All">All</option>
        </select>
      </div>
    </div>

    <script>
      let fieldMultiselect = document.querySelectorAll(".field_multiselect"),
        multiselect = document.querySelectorAll(".field_select");


      multiselect.forEach((select) => {

        select.addEventListener("change", function(element) {
          let valueName = this.value;
          let multiselectField = this.parentElement.children[0];
          multiselectField.innerHTML = '<button class="btn_multiselect" type="button">' + valueName + '</button>';

          console.log("valueName", valueName);
        })
      });

    </script>
  </body>

</html>
Ответить с цитированием