Added methods in class(7/8)

src/cg-dropdown.js

@@ -32,7 +32,7 @@ export class DropDown {
     this.#caret = this.#element.querySelector('.caret');
   }
 
-  #initSelected() {
+  #initSelected(select) {
     const { styles } = this.#options;
 
     if (this.#options.selected) {
@@ -52,6 +52,10 @@ export class DropDown {
       this.#createSelected('Select...');
       this.#customStyles(styles);
     }
+
+    if (select) {
+      this.#createSelected(select);
+    }
   }
 
   #initAmount() {
@@ -69,18 +73,22 @@ export class DropDown {
     this.#element.innerHTML += `<ul class="list">${templete}</ul>`;
   }
 
-  #render() {
+  #render(select) {
     const { items, styles } = this.#options;
 
-    this.#initSelected();
+    if (select || (select && styles)) {
-    this.#element.querySelector(this.#options.selector);
+      this.#initSelected(select);
+      this.#customStyles(styles);
+    } else {
+      this.#initSelected();
+    }
 
+    this.#element.querySelector(this.#options.selector);
     let ul = document.createElement('ul');
 
     if (styles) {
       const { list } = styles;
 
-      console.log(styles);
       ul.classList.add('list');
 
       if (ul) {
@@ -141,12 +149,8 @@ export class DropDown {
       return;
     }
 
-    this.#list = this.#element.querySelectorAll('.list');
-    this.#caret = this.#element.querySelector('.caret');
-
     if (event) {
       let list = this.#element.querySelectorAll('.list');
-      console.log(list);
 
       if (event === 'mouseenter') {
         this.#element.addEventListener(event, () => {
@@ -220,4 +224,31 @@ export class DropDown {
     items.push(item);
     this.#render();
   }
+
+  deleteItem(item) {
+    const { items } = this.#options;
+
+    let index = items.indexOf(item);
+
+    items.splice(index, 1);
+
+    this.#render();
+  }
+
+  deleteItemAll() {
+    const { items } = this.#options;
+
+    items.splice(0, items.length);
+
+    console.log(items);
+    this.#render();
+  }
+
+  selectIndex(index) {
+    const options = this.#element.querySelectorAll('.list__item');
+
+    let select = options[index].innerText;
+
+    this.#render(select);
+  }
 }

src/index.js

@@ -10,7 +10,7 @@ dropdown.addItem('ZAZ');
 
 const dropdown2 = new DropDown({
   selector: '.cg-dropdown2',
-  placeholder: 'Выберите авто',
+  selected: '...',
   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'],
   event: 'mouseenter',
   styles: {
@@ -34,6 +34,11 @@ const dropdown2 = new DropDown({
 });
 
 dropdown2.addItem('LADA');
+dropdown2.selectIndex(3);
+
+// dropdown2.deleteItemAll();
+
+// dropdown2.deleteItem('MAN');
 
 // const dropdown3 = new DropDown({
 //   selector: '.cg-dropdown3',