All methods in working,and refactoring render, renderUrl etc..

src/cg-dropdown.js

@@ -66,7 +66,11 @@ export class DropDown {
   selectIndex(index) {
     const options = this.#element.querySelectorAll('.list__item');
 
-    let select = options[index].innerText;
+    if (index > options.length) {
+      return;
+    }
+
+    const select = options[index].innerText;
 
     this.#render(select);
   }
@@ -77,6 +81,8 @@ export class DropDown {
 
   #init(options) {
     this.#options = options;
+    const { items, multiselect, url } = this.#options;
+
     const elem = document.querySelector(options.selector);
 
     if (!elem) {
@@ -92,7 +98,6 @@ export class DropDown {
     this.#list = this.#element.querySelector('.list');
     this.#caret = this.#element.querySelector('.caret');
 
-    const { items, multiselect, url } = this.#options;
     this.#items = [];
 
     if (multiselect) {
@@ -127,24 +132,17 @@ export class DropDown {
   }
 
   #initSelected(select) {
-    const { styles } = this.#options;
+    const { styles, selected, placeholder } = this.#options;
 
-    if (this.#options.selected) {
+    if (selected) {
-      createSelected(this.#element, this.#options.selected);
+      createSelected(this.#element, selected);
+    } else if (placeholder) {
+      createSelected(this.#element, placeholder);
     } else {
       createSelected(this.#element, 'Select...');
     }
 
-    if (!this.#options.selected && this.#options.placeholder) {
-      createSelected(this.#element, this.#options.placeholder);
-    }
-
     if (styles) {
-      if (this.#options.placeholder) {
-        createSelected(this.#element, this.#options.placeholder, styles);
-      } else if (this.#options.selected) {
-        createSelected(this.#element, this.#options.selected, styles);
-      }
       customStyles(this.#element, styles);
     }
 
@@ -154,7 +152,7 @@ export class DropDown {
   }
 
   #render(select) {
-    const { items, styles, url, multiselect, multiselectTag } = this.#options;
+    const { styles, multiselect, multiselectTag } = this.#options;
 
     if (select || (select && styles)) {
       this.#initSelected(select);
@@ -168,24 +166,15 @@ export class DropDown {
     if (styles) {
       const { list } = styles;
 
-      ul.classList.add('list');
-
       if (ul && list) {
         Object.entries(list).forEach(([key, value]) => {
           ul.style[key] = value;
         });
       }
+    }
 
-      this.#element.appendChild(ul);
-    } else {
     ul.classList.add('list');
     this.#element.appendChild(ul);
-    }
-
-    if (!items && url) {
-      this.#renderUrl();
-      return;
-    }
 
     this.#items.forEach((dataItem) => {
       const li = document.createElement('li');
@@ -195,10 +184,8 @@ export class DropDown {
       if (multiselect) {
         const checkBox = document.createElement('input');
         checkBox.type = 'checkbox';
-
-        if (multiselectTag) {
         checkBox.setAttribute('id', `chbox-${dataItem.id}`);
-        }
+
         li.appendChild(checkBox);
       }
 
@@ -207,15 +194,14 @@ export class DropDown {
       li.appendChild(textNode);
       ul.appendChild(li);
     });
-    console.log(this.#items);
 
     this.#addOptionsBehaviour();
   }
 
   async #renderUrl() {
-    const { url } = this.#options;
+    const { url, items, multiselect } = this.#options;
 
-    if (this.#items) {
+    if (items) {
       return;
     }
 
@@ -224,8 +210,8 @@ export class DropDown {
     }
 
     const response = await fetch(url);
+
     const data = await response.json();
-    console.log(response);
 
     data.forEach((dataItem, index) => {
       const item = {
@@ -237,12 +223,13 @@ export class DropDown {
       const li = document.createElement('li');
       const text = document.createTextNode(item.title);
 
+      if (multiselect) {
         const checkBox = document.createElement('input');
         checkBox.type = 'checkbox';
 
         checkBox.setAttribute('id', `chbox-${item.id}`);
-
         li.appendChild(checkBox);
+      }
 
       li.classList.add('list__item');
       li.appendChild(text);
@@ -268,16 +255,16 @@ export class DropDown {
   }
 
   #addOptionsBehaviour() {
-    const { multiselect, placeholder, multiselectTag } = this.#options;
+    const { multiselect, placeholder, selected, multiselectTag } = this.#options;
 
     const options = this.#element.querySelectorAll('.list__item');
-    const selected = this.#element.querySelector('.selected');
+    const select = this.#element.querySelector('.selected');
 
     const ul = document.createElement('ul');
 
     if (multiselect) {
       ul.classList.add('multiselect-tag');
-      selected.classList.add('overflow-hidden');
+      select.classList.add('overflow-hidden');
     }
 
     options.forEach((option, index) => {
@@ -296,83 +283,59 @@ export class DropDown {
             }
 
             const checkIndex = this.#indexes.indexOf(index);
-            let value = '';
-            let id = '';
 
             if (checkIndex === -1) {
               this.#indexes.push(index);
 
-              if (this.#checkItemStruct(item)) {
               this.#selectedItems.push(item.title);
-                value = item.title;
-                id = item.id;
-              } else {
-                this.#selectedItems.push(item);
-                value = item;
-              }
 
-              selected.innerText = '';
+              select.innerText = '';
 
               if (multiselectTag) {
-                selected.appendChild(ul);
+                select.appendChild(ul);
 
-                if (this.#checkItemStruct(item)) {
                 ul.appendChild(
                   createBreadcrumb(
                     this.#options,
                     this.#element,
                     this.#indexes,
                     this.#selectedItems,
-                      value,
+                    item.title,
                     index,
-                      id,
+                    item.id,
                   ),
                 );
               } else {
-                  ul.appendChild(
+                select.innerText = this.#selectedItems;
-                    createBreadcrumb(
-                      this.#options,
-                      this.#element,
-                      this.#indexes,
-                      this.#selectedItems,
-                      value,
-                      index,
-                    ),
-                  );
-                }
-              } else {
-                selected.innerText = this.#selectedItems;
               }
             } else {
               if (multiselectTag) {
                 const tagItem = document.getElementById(`tag-${index}`);
 
                 ul.removeChild(tagItem);
-
-                this.#indexes.splice(checkIndex, 1);
-                this.#selectedItems.splice(checkIndex, 1);
-              } else {
-                this.#indexes.splice(checkIndex, 1);
-                this.#selectedItems.splice(checkIndex, 1);
               }
+              this.#indexes.splice(checkIndex, 1);
+              this.#selectedItems.splice(checkIndex, 1);
             }
 
             if (!this.#selectedItems.length) {
-              selected.innerText = placeholder;
+              if (placeholder) {
+                select.innerText = placeholder;
+              } else if (selected) {
+                select.innerText = selected;
+              } else {
+                select.innerText = 'Select...';
+              }
             } else {
               if (multiselectTag) {
-                selected.appendChild(ul);
+                select.appendChild(ul);
               } else {
-                selected.innerText = this.#selectedItems;
+                select.innerText = this.#selectedItems;
               }
             }
           }
         } else {
-          if (this.#checkItemStruct(item)) {
+          select.innerText = item.title;
-            selected.innerText = item.title;
-          } else {
-            selected.innerText = item;
-          }
           this.#selectedItems = item;
 
           options.forEach((option) => {

src/index.js

@@ -21,6 +21,7 @@ dropdown.addItem('BMW');
 const dropdown2 = new DropDown({
   selector: '.cg-dropdown2',
   placeholder: 'SELECT CAR',
+
   items: [
     {
       id: 'addaw21',
@@ -48,7 +49,11 @@ const dropdown2 = new DropDown({
       value: 5,
     },
   ],
-
+  styles: {
+    head: {
+      background: 'red',
+    },
+  },
   multiselect: true,
   // multiselectTag: true,
 });
@@ -61,6 +66,11 @@ const dropdown3 = new DropDown({
   selector: '.cg-dropdown3',
   placeholder: 'URL',
   url: 'http://jsonplaceholder.typicode.com/users',
+  styles: {
+    head: {
+      background: 'red',
+    },
+  },
   multiselect: true,
   multiselectTag: true,
 });