Methods cg-select complted

src/cg-dropdown.js

@@ -4,8 +4,6 @@ export class DropDown {
   #options;
   #caret;
 
-  //ToDo: Added  url
-
   constructor(options = {}) {
     this.#init(options);
     this.#initAmount();
@@ -49,7 +47,6 @@ export class DropDown {
       this.#createSelected(this.#options.placeholder);
       this.#customStyles(styles);
     } else {
-      this.#createSelected('Select...');
       this.#customStyles(styles);
     }
 
@@ -106,10 +103,18 @@ export class DropDown {
 
     items.map((item) => {
       let li = document.createElement('li');
-      const text = document.createTextNode(item);
-      li.classList.add('list__item');
 
-      li.appendChild(text);
+      if (typeof item == 'object') {
+        const text = document.createTextNode(item.value);
+        li.classList.add('list__item');
+        li.appendChild(text);
+      } else {
+        const text = document.createTextNode(item);
+
+        li.classList.add('list__item');
+        li.appendChild(text);
+      }
+
       ul.appendChild(li);
     });
   }
@@ -251,4 +256,10 @@ export class DropDown {
 
     this.#render(select);
   }
+
+  getElement(number) {
+    const { items } = this.#options;
+
+    return items[number];
+  }
 }

src/index.html

@@ -13,7 +13,7 @@
 
       <div class="cg-dropdown2"></div>
 
-      <!-- <div class="cg-dropdown3"></div> -->
+      <div class="cg-dropdown3"></div>
     </div>
   </body>
   <script type="module" src="index.js"></script>

src/index.js

@@ -10,7 +10,7 @@ dropdown.addItem('ZAZ');
 
 const dropdown2 = new DropDown({
   selector: '.cg-dropdown2',
-  selected: '...',
+  placeholder: 'Выберите авто',
   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'],
   event: 'mouseenter',
   styles: {
@@ -34,7 +34,31 @@ const dropdown2 = new DropDown({
 });
 
 dropdown2.addItem('LADA');
-dropdown2.selectIndex(3);
+// dropdown2.selectIndex(3);
+
+const dropdown3 = new DropDown({
+  selector: '.cg-dropdown3',
+  items: [
+    {
+      id: '186',
+      value: 'A008',
+    },
+    {
+      id: '288',
+      value: 'BMW',
+    },
+    {
+      id: '355',
+      value: 'MAN',
+    },
+  ],
+});
+
+let a = dropdown3.getElement(0);
+console.log(a);
+
+let b = dropdown.getElement(0);
+console.log(b);
 
 // dropdown2.deleteItemAll();