diff --git a/MultiSelect.js b/MultiSelect.js index 836f6de..b318c2b 100644 --- a/MultiSelect.js +++ b/MultiSelect.js @@ -1,7 +1,7 @@ /* * Created by David Adams * https://codeshack.io/multi-select-dropdown-html-javascript/ - * + * * Released under the MIT license */ class MultiSelect { @@ -12,7 +12,9 @@ class MultiSelect { max: null, search: true, selectAll: true, + selectAllText: 'Select all', listAll: true, + listAllText: 'selected', closeListOnItemSelect: false, name: '', width: '', @@ -63,7 +65,7 @@ class MultiSelect { if (this.options.selectAll === true || this.options.selectAll === 'true') { selectAllHTML = `
- Select all + ${this.selectAllText}
`; } let template = ` @@ -116,7 +118,9 @@ class MultiSelect { if (this.element.querySelector('.multi-select-header-option')) { this.element.querySelector('.multi-select-header-option').remove(); } - headerElement.insertAdjacentHTML('afterbegin', `${this.selectedValues.length} selected`); + if(this.selectedValues.length > 0) { + headerElement.insertAdjacentHTML('afterbegin', `${this.selectedValues.length} ${this.listAllText}`); + } } if (!this.element.querySelector('.multi-select-header-option')) { headerElement.insertAdjacentHTML('afterbegin', `${this.placeholder}`); @@ -141,7 +145,7 @@ class MultiSelect { } }; }); - headerElement.onclick = () => headerElement.classList.toggle('multi-select-header-active'); + headerElement.onclick = () => headerElement.classList.toggle('multi-select-header-active'); if (this.options.search === true || this.options.search === 'true') { let search = this.element.querySelector('.multi-select-search'); search.oninput = () => { @@ -184,7 +188,7 @@ class MultiSelect { }); } else { if (this.selectedValues.length > 0) { - this.element.querySelector('.multi-select-header').insertAdjacentHTML('afterbegin', `${this.selectedValues.length} selected`); + this.element.querySelector('.multi-select-header').insertAdjacentHTML('afterbegin', `${this.selectedValues.length} ${this.listAllText}`); } } if (this.element.querySelector('.multi-select-header-option')) { @@ -232,6 +236,22 @@ class MultiSelect { return this.options.placeholder; } + set listAllText(value) { + this.options.listAllText = value; + } + + get listAllText() { + return this.options.listAllText; + } + + set selectAllText(value) { + this.options.selectAllText = value; + } + + get selectAllText() { + return this.options.selectAllText; + } + set name(value) { this.options.name = value; }