Nativ select/multiple is working!

src/cg-dropdown.js

@@ -3,8 +3,10 @@ import {
   customStyles,
   getFormatItem,
   customStylesFormat,
+  nativOptionMultiple,
+  nativOptionOrdinary,
 } from './components/utils';
-import { createBreadcrumb } from './components/create-element';
+import { createBreadcrumb, createListSelect } from './components/create-element';
 
 /**
  * @class Описание класса DropDown
@@ -342,8 +344,8 @@ export class DropDown {
     }
 
     const ulList = document.createElement('ul');
-    ///
     const nativSelect = document.createElement('select');
+
     nativSelect.setAttribute('form', 'data');
 
     nativSelect.classList.add('nativSelect');
@@ -373,7 +375,10 @@ export class DropDown {
         checkBox.setAttribute('id', `chbox-${dataItem.id}`);
 
         liItem.appendChild(checkBox);
+
+        nativSelect.setAttribute('multiple', 'multiple');
       }
+      nativSelect.setAttribute('name', 'dataSelect');
 
       let textNode = '';
 
@@ -382,7 +387,6 @@ export class DropDown {
         ///
         nativOption.text = dataItem.title;
         nativOption.value = dataItem.title;
-        nativSelect.setAttribute('name', 'dataSelect');
         nativSelect.appendChild(nativOption);
 
         ///
@@ -505,16 +509,17 @@ export class DropDown {
     const select = this.#element.querySelector('.selected');
     const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
 
-    const ul = document.createElement('ul');
+    const ulMultipul = document.createElement('ul');
 
     if (multiselect) {
-      ul.classList.add('multiselect-tag');
+      ulMultipul.classList.add('multiselect-tag');
       select.classList.add('overflow-hidden');
     }
 
     options.forEach((option, index) => {
       option.addEventListener('click', (event) => {
         const item = this.#items[index];
+
         if (multiselect) {
           event.stopPropagation();
           option.classList.toggle('active');
@@ -529,13 +534,15 @@ export class DropDown {
             const checkIndex = this.#indexes.indexOf(index);
 
             if (checkIndex === -1) {
+              nativOptionMultiple(nativOption, item.title, true);
+
               this.#indexes.push(index);
 
               select.innerText = '';
 
               if (multiselectTag) {
                 this.#selectedItems.push(item);
-                select.appendChild(ul);
+                select.appendChild(ulMultipul);
 
                 const data = {
                   option: this.#options,
@@ -544,7 +551,7 @@ export class DropDown {
                   selectedItems: this.#selectedItems,
                 };
 
-                ul.appendChild(createBreadcrumb(data, item.title, index, item.id));
+                ulMultipul.appendChild(createBreadcrumb(data, item.title, index, item.id));
               } else {
                 this.#selectedItems.push(item.title);
                 select.innerText = this.#selectedItems;
@@ -552,11 +559,11 @@ export class DropDown {
             } else {
               if (multiselectTag) {
                 const tagItem = document.getElementById(`tag-${index}-${item.id}`);
-
-                ul.removeChild(tagItem);
+                ulMultipul.removeChild(tagItem);
               }
               this.#indexes.splice(checkIndex, 1);
               this.#selectedItems.splice(checkIndex, 1);
+              nativOptionMultiple(nativOption, item.title, false);
             }
 
             if (!this.#selectedItems.length) {
@@ -569,7 +576,7 @@ export class DropDown {
               }
             } else {
               if (multiselectTag) {
-                select.appendChild(ul);
+                select.appendChild(ulMultipul);
               } else {
                 select.innerText = this.#selectedItems;
               }
@@ -578,11 +585,7 @@ export class DropDown {
         } else {
           select.innerText = item.title;
           this.#selectedItems = item;
-          nativOption.forEach((op) => {
-            if (op.textContent === item.title) {
-              op.setAttribute('selected', 'selected');
-            }
-          });
+          nativOptionOrdinary(nativOption, item.title);
 
           options.forEach((option) => {
             option.classList.remove('active');

src/components/create-element.js

@@ -1,4 +1,4 @@
-import { customStylesFormat } from './utils';
+import { customStylesFormat, nativOptionMultiple } from './utils';
 /**
  * @module createBreadcrumb
  */
@@ -16,6 +16,8 @@ export function createBreadcrumb(data, title, index, id) {
   const { placeholder, styles } = option;
 
   const selected = element.querySelector('.selected');
+  const nativOption = element.querySelectorAll('.nativSelect__nativOption');
+
   const liChip = document.createElement('li');
   const textNode = document.createTextNode(title);
   const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -41,14 +43,14 @@ export function createBreadcrumb(data, title, index, id) {
 
   svgIcon.addEventListener('click', (event) => {
     event.stopPropagation();
+    nativOptionMultiple(nativOption, title, false);
 
     const deleteIcon = indexes.indexOf(index);
+    let checkBox = '';
 
     indexes.splice(deleteIcon, 1);
     selectedItems.splice(deleteIcon, 1);
 
-    let checkBox = '';
-
     if (id) {
       checkBox = document.getElementById(`chbox-${id}`);
     } else {

src/components/utils.js

@@ -108,3 +108,39 @@ export function getFormatItem(dataItem, index) {
 
   return item;
 }
+
+/**
+ * Поведение нативного(одинарного) селекта при выборе кастомного
+ * @param {NodeList} element NodeList нативного селекта
+ * @param {object} item выбранный элемент в кастомном селекте
+ */
+export function nativOptionOrdinary(element, item) {
+  element.forEach((option) => {
+    option.removeAttribute('selected');
+    if (option.textContent === item) {
+      option.setAttribute('selected', 'selected');
+    }
+  });
+}
+
+/**
+ * Поведение нативного(Multiple) селекта при выборе в кастомном
+ * @param {NodeList} element NodeList нативного селекта
+ * @param {object} item выбранный элемент в кастомном селекте
+ * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
+ */
+export function nativOptionMultiple(element, item, condition) {
+  element.forEach((option) => {
+    if (condition == true) {
+      if (option.textContent === item) {
+        option.setAttribute('selected', 'selected');
+      }
+    } else if (condition == false) {
+      if (option.textContent === item) {
+        option.removeAttribute('selected');
+      }
+    } else {
+      return;
+    }
+  });
+}

src/index.html

@@ -14,9 +14,9 @@
 
       <button class="cg-dropdown cg-dropdown_one"></button>
       <input type="submit" form="data" value="Отправить" />
-      <!-- <button class="cg-dropdown cg-dropdown_three"></button>
+      <!-- <button class="cg-dropdown cg-dropdown_three"></button> -->
 
-      <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button> -->
+      <!-- <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button> -->
     </div>
   </body>
   <script type="module" src="index.js"></script>

src/index.js

@@ -15,8 +15,11 @@ const dropdown = new DropDown({
     'MAN',
     'max',
   ],
+  multiselect: true,
+  multiselectTag: true,
 });
 
+dropdown.disabled(false);
 // ------------------------------URL--------------------
 // const dropdown3 = new DropDown({
 //   selector: '.cg-dropdown_three',