From 1ffa21c7b371c43a9984af8d8ee1d9178769807f Mon Sep 17 00:00:00 2001
From: Benson Tsai <82853302+bsontsai@users.noreply.github.com>
Date: Tue, 19 Aug 2025 15:59:19 +0900
Subject: [PATCH 1/2] Update MultiSelect.js

registry and clearSelected()
---
 MultiSelect.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
diff --git a/MultiSelect.js b/MultiSelect.js
index 836f6de..5e696c9 100644
--- a/MultiSelect.js
+++ b/MultiSelect.js
@@ -5,8 +5,13 @@
  * Released under the MIT license
  */
 class MultiSelect {
+    static registry = new Map(); // Stores all instances by element ID
 
     constructor(element, options = {}) {
+        // Register this instance
+        if (element.id) {
+            MultiSelect.registry.set(element.id, this);
+        }
         let defaults = {
             placeholder: 'Select item(s)',
             max: null,
@@ -256,5 +261,19 @@ class MultiSelect {
         return this.options.height;
     }
 
+    clearSelected() {
+        let selectAllButton = this.element.querySelector('.multi-select-all');
+        if (!selectAllButton.classList.contains('multi-select-selected')) {
+            selectAllButton.classList.add('multi-select-selected');
+        }
+        selectAllButton.click();
+    }
+
+    // Static helper to fetch instance anywhere
+    static getById(id) {
+        return MultiSelect.registry.get(id);
+    }
+    
 }
 document.querySelectorAll('[data-multi-select]').forEach(select => new MultiSelect(select));
+

From 9910fb8dff65c793458168c20c8f37902008c8d9 Mon Sep 17 00:00:00 2001
From: Benson Tsai <82853302+bsontsai@users.noreply.github.com>
Date: Tue, 19 Aug 2025 19:45:47 +0900
Subject: [PATCH 2/2] Create clear_demo.html

---
 clear_demo.html | 133 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 clear_demo.html

diff --git a/clear_demo.html b/clear_demo.html
new file mode 100644
index 0000000..03ee3c2
--- /dev/null
+++ b/clear_demo.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,minimum-scale=1">
+		<title>Multi Select JS</title>
+        <!-- Include the Multi Select stylesheet -->
+        <link href="MultiSelect.css" rel="stylesheet" type="text/css">
+        <style>
+        * {
+            box-sizing: border-box;
+            font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            font-size: 16px;
+        }
+        body {
+            margin: 0;
+            padding: 15px;
+            background-color: #f3f4f7;
+        }
+        form {
+            display: flex;
+            flex-direction: column;
+            margin: 100px auto;
+            padding: 40px 40px 60px;
+            max-width: 500px;
+            width: 100%;
+            background-color: #fff;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        form h1 {
+            margin: 10px 0 5px;
+            font-size: 24px;
+            font-weight: 500;
+            color: #474b50;
+        }
+        form label {
+            margin: 25px 0 10px;
+            font-weight: 500;
+            color: #474b50;
+        }
+        </style>
+	</head>
+	<body>
+        <form>
+
+            <h1>Multi Select Dropdown</h1>
+
+            <label for="fruits">Fruits</label>
+            <select id="fruits" name="fruits" data-placeholder="Select fruits" multiple data-multi-select>
+                <option value="Apple">Apple</option>
+                <option value="Banana">Banana</option>
+                <option value="Blackberry">Blackberry</option>
+                <option value="Blueberry">Blueberry</option>
+                <option value="Cherry">Cherry</option>
+                <option value="Cranberry">Cranberry</option>
+                <option value="Grapes">Grapes</option>
+                <option value="Kiwi">Kiwi</option>
+                <option value="Mango">Mango</option>
+                <option value="Orange">Orange</option>
+                <option value="Peach">Peach</option>
+                <option value="Pear">Pear</option>
+                <option value="Pineapple">Pineapple</option>
+                <option value="Raspberry">Raspberry</option>
+                <option value="Strawberry">Strawberry</option>
+                <option value="Watermelon">Watermelon</option>
+            </select>
+
+            <button id="clearFruits" type="button">Clear selected fruits with js</button>
+            <script>
+              document.getElementById("clearFruits").addEventListener("click", () => {
+                MultiSelect.getById("fruits").clearSelected();
+              });
+            </script>
+          
+            <label for="cars">Car Manufacturers</label>
+            <select id="cars" name="cars" data-placeholder="Select car manufacturers" data-max="2" data-search="false" data-select-all="false" data-width="300px" data-height="50px" multiple data-multi-select>
+                <option value="Audi">Audi</option>
+                <option value="BMW">BMW</option>
+                <option value="Chevrolet">Chevrolet</option>
+            </select>
+
+            <label for="dynamic">Dynamic Select</label>
+            <select id="dynamic" name="dynamic"></select>
+
+        </form>
+        <!-- Include the Multi Select JS class -->
+        <script src="MultiSelect.js"></script>
+        <script>
+        // Initialize the Multi Selects
+        new MultiSelect('#dynamic', {
+            data: [
+                {
+                    value: 'opt1',
+                    text: 'Option 1'
+                },
+                {
+                    value: 'opt2',
+                    html: '<strong>Option 2 with HTML!</strong>'
+                },
+                {
+                    value: 'opt3',
+                    text: 'Option 3',
+                    selected: true
+                },
+                {
+                    value: 'opt4',
+                    text: 'Option 4'
+                },
+                {
+                    value: 'opt5',
+                    text: 'Option 5'
+                }
+            ],
+            placeholder: 'Select an option',
+            search: true,
+            selectAll: true,
+            listAll: false,
+            max: 2,
+            onChange: function(value, text, element) {
+                console.log('Change:', value, text, element);
+            },
+            onSelect: function(value, text, element) {
+                console.log('Selected:', value, text, element);
+            },
+            onUnselect: function(value, text, element) {
+                console.log('Unselected:', value, text, element);
+            }
+        });
+        </script>
+
+    </body>
+</html>
