Multiselect in working, but requires refactor!
This commit is contained in:
parent
72066a9c88
commit
af54b890a7
@ -240,29 +240,14 @@ export class DropDown {
|
|||||||
const options = this.#element.querySelectorAll('.list__item');
|
const options = this.#element.querySelectorAll('.list__item');
|
||||||
const selected = this.#element.querySelector('.selected');
|
const selected = this.#element.querySelector('.selected');
|
||||||
|
|
||||||
const ul = document.createElement('ul');
|
// const ul = document.createElement('ul');
|
||||||
|
|
||||||
|
// ul.classList.add('multiselectTag');
|
||||||
|
|
||||||
options.forEach((option, index) => {
|
options.forEach((option, index) => {
|
||||||
option.addEventListener('click', (event) => {
|
option.addEventListener('click', (event) => {
|
||||||
const item = this.#items[index];
|
const item = this.#items[index];
|
||||||
|
|
||||||
const li = document.createElement('li');
|
|
||||||
const btn = document.createElement('button');
|
|
||||||
const text = document.createTextNode('X');
|
|
||||||
|
|
||||||
// let textLi = document.createTextNode(item);
|
|
||||||
// t.toString();
|
|
||||||
// console.log(textLi);
|
|
||||||
|
|
||||||
btn.appendChild(text);
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
console.log('aaaa');
|
|
||||||
ul.removeChild(li);
|
|
||||||
});
|
|
||||||
|
|
||||||
ul.classList.add('multiselectTag');
|
|
||||||
console.log(ul);
|
|
||||||
|
|
||||||
if (multiselect) {
|
if (multiselect) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
option.classList.toggle('active');
|
option.classList.toggle('active');
|
||||||
@ -276,24 +261,26 @@ export class DropDown {
|
|||||||
|
|
||||||
const checkIndex = this.#indexes.indexOf(index);
|
const checkIndex = this.#indexes.indexOf(index);
|
||||||
|
|
||||||
|
let templete = '';
|
||||||
if (checkIndex === -1) {
|
if (checkIndex === -1) {
|
||||||
this.#indexes.push(index);
|
this.#indexes.push(index);
|
||||||
|
|
||||||
if (this.#checkItemStruct(item)) {
|
if (this.#checkItemStruct(item)) {
|
||||||
this.#value.push(item.title);
|
this.#value.push(item.title);
|
||||||
} else {
|
} else {
|
||||||
let textLi = document.createTextNode(item);
|
|
||||||
li.appendChild(textLi);
|
|
||||||
li.appendChild(btn);
|
|
||||||
ul.appendChild(li);
|
|
||||||
|
|
||||||
this.#value.push(item);
|
this.#value.push(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
// selected.innerText = this.#value;
|
//TODO refactoring code!!!!
|
||||||
|
if (multiselectTag) {
|
||||||
|
for (let i = 0; i < this.#value.length; i++) {
|
||||||
|
templete += `<li>${this.#value[i]}<button>X</button></li>`;
|
||||||
|
}
|
||||||
|
|
||||||
selected.innerText = '';
|
selected.innerHTML = `<ul class="multiselectTag">${templete}</ul>`;
|
||||||
selected.appendChild(ul);
|
} else {
|
||||||
|
selected.innerText = this.#value;
|
||||||
|
}
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -301,10 +288,22 @@ export class DropDown {
|
|||||||
this.#indexes.splice(checkIndex, 1);
|
this.#indexes.splice(checkIndex, 1);
|
||||||
this.#value.splice(checkIndex, 1);
|
this.#value.splice(checkIndex, 1);
|
||||||
|
|
||||||
|
if (multiselectTag) {
|
||||||
|
for (let i = 0; i < this.#value.length; i++) {
|
||||||
|
templete += `<li>${this.#value[i]} <button>X</button></li>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
selected.innerHTML = `<ul class="multiselectTag">${templete}</ul>`;
|
||||||
|
}
|
||||||
|
|
||||||
if (!this.#value.length) {
|
if (!this.#value.length) {
|
||||||
selected.innerText = placeholder;
|
selected.innerText = placeholder;
|
||||||
} else {
|
} else {
|
||||||
selected.innerText = this.#value;
|
if (multiselectTag) {
|
||||||
|
selected.innerHTML = `<ul class="multiselectTag">${templete}</ul>`;
|
||||||
|
} else {
|
||||||
|
selected.innerText = this.#value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -45,10 +45,10 @@ const dropdown2 = new DropDown({
|
|||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
console.log(dropdown2.value);
|
console.log(dropdown.value);
|
||||||
}, 10000);
|
}, 10000);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
console.log(dropdown2.indexes);
|
console.log(dropdown.indexes);
|
||||||
}, 10000);
|
}, 10000);
|
||||||
|
|
||||||
//ToDo: paste the desired url;
|
//ToDo: paste the desired url;
|
||||||
|
Loading…
Reference in New Issue
Block a user