Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   JS multiselect с кнопками удаления выбранных option (https://javascript.ru/forum/events/82192-js-multiselect-s-knopkami-udaleniya-vybrannykh-option.html)

Black_Star 29.03.2021 17:05
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>

рони 29.03.2021 17:41
Black_Star,
:-?

voraa 29.03.2021 17:56 
<!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>
        const multiselect = document.querySelector(".field_select");
        multiselect.addEventListener("change", function(element) {
			var s = '';
			for (let i=0; i< multiselect.selectedOptions.length; i++) {
				s+='<button class="btn_multiselect" type="button">' + multiselect.selectedOptions[i].value + '</button>'
			}
          let multiselectField = this.parentElement.children[0];
          multiselectField.innerHTML = s;
 
         console.log("valueName", s);
        })
 
    </script>
  </body>
 
</html>

рони 29.03.2021 18:18
Black_Star,
<!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 multiselect_block = document.querySelectorAll(".multiselect_block");
        multiselect_block.forEach(parent => {
            let label = parent.querySelector(".field_multiselect");
            let select = parent.querySelector(".field_select");
            let text = label.innerHTML;
            select.addEventListener("change", function(element) {
                let selectedOptions = this.selectedOptions;
                label.innerHTML = "";
                for (let option of selectedOptions) {
                    let button = document.createElement("button");
                    button.type = "button";
                    button.className = "btn_multiselect";
                    button.textContent = option.value;
                    button.onclick = _ => {
                        option.selected = false;
                        button.remove();
                        if (!select.selectedOptions.length) label.innerHTML = text
                    }
                    label.append(button)
                };
            })
        })
    </script>
</body>

</html>

Black_Star 29.03.2021 18:52
Огромное спасибо :thanks: Это то что надо


Часовой пояс GMT +3, время: 21:19.