Skip to content

Add texts options, show placeholder if no items selected #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add texts options, show placeholder if no items selected #6

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
72191b0
Add texts options, show placeholder if no items selected
jaynoe Sep 11, 2024
98822a5
Add missing 'selected' text option
jaynoe Jun 30, 2025
2d1e012
Merge branch 'codeshackio:main' into main
jaynoe Jun 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 24 additions & 4 deletions MultiSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
* Created by David Adams
* https://codeshack.io/multi-select-dropdown-html-javascript/
*
*
* Released under the MIT license
*/
class MultiSelect {
Expand All @@ -12,7 +12,9 @@ class MultiSelect {
max: null,
search: true,
selectAll: true,
selectAllText: 'Select all',
listAll: true,
listAllText: 'selected',
closeListOnItemSelect: false,
name: '',
width: '',
Expand Down Expand Up @@ -63,7 +65,7 @@ class MultiSelect {
if (this.options.selectAll === true || this.options.selectAll === 'true') {
selectAllHTML = `<div class="multi-select-all">
<span class="multi-select-option-radio"></span>
<span class="multi-select-option-text">Select all</span>
<span class="multi-select-option-text">${this.selectAllText}</span>
</div>`;
}
let template = `
Expand Down Expand Up @@ -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', `<span class="multi-select-header-option">${this.selectedValues.length} selected</span>`);
if(this.selectedValues.length > 0) {
headerElement.insertAdjacentHTML('afterbegin', `<span class="multi-select-header-option">${this.selectedValues.length} ${this.listAllText}</span>`);
}
}
if (!this.element.querySelector('.multi-select-header-option')) {
headerElement.insertAdjacentHTML('afterbegin', `<span class="multi-select-header-placeholder">${this.placeholder}</span>`);
Expand All @@ -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 = () => {
Expand Down Expand Up @@ -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;
}
Expand Down