From 72191b0d244a2d5ef452de0eee0926a1b49f8ea5 Mon Sep 17 00:00:00 2001
From: Jannik <mail@jaynoe.de>
Date: Wed, 11 Sep 2024 17:02:56 +0200
Subject: [PATCH 1/2] Add texts options, show placeholder if no items selected

Added text options for "selectAll" and if the "listAll" option is disabled.

Also added that if the listAll option is deactivated, the placeholder is shown instead of "0 selected"
---
 MultiSelect.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/MultiSelect.js b/MultiSelect.js
index 836f6de..581d65e 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 = `<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 = `
@@ -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>`);
@@ -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 = () => {
@@ -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;
     }

From 98822a58cbac35913d46fd6232df407708ff0e52 Mon Sep 17 00:00:00 2001
From: Jannik <mail@jaynoe.de>
Date: Mon, 30 Jun 2025 13:21:55 +0200
Subject: [PATCH 2/2] Add missing 'selected' text option

---
 MultiSelect.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MultiSelect.js b/MultiSelect.js
index 581d65e..b318c2b 100644
--- a/MultiSelect.js
+++ b/MultiSelect.js
@@ -188,7 +188,7 @@ class MultiSelect {
             });
         } else {
             if (this.selectedValues.length > 0) {
-                this.element.querySelector('.multi-select-header').insertAdjacentHTML('afterbegin', `<span class="multi-select-header-option">${this.selectedValues.length} selected</span>`);
+                this.element.querySelector('.multi-select-header').insertAdjacentHTML('afterbegin', `<span class="multi-select-header-option">${this.selectedValues.length} ${this.listAllText}</span>`);
             }
         }
         if (this.element.querySelector('.multi-select-header-option')) {