diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index a6b0c69..51d5472 100644
--- a/src/cg-dropdown.js
+++ b/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 += `
`;
}
- #render() {
+ #render(select) {
const { items, styles } = this.#options;
- this.#initSelected();
- this.#element.querySelector(this.#options.selector);
+ if (select || (select && styles)) {
+ 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);
+ }
}
diff --git a/src/index.js b/src/index.js
index d292585..04f7867 100644
--- a/src/index.js
+++ b/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',