Add example in index.html + refactoring

assets/scripts/src/choices.js

@@ -1915,14 +1915,14 @@ class Choices {
       triggerEvent(this.passedElement, 'addItem', {
         id,
         value: passedValue,
-	label: passedLabel,
+        label: passedLabel,
         groupValue: group.value,
       });
     } else {
       triggerEvent(this.passedElement, 'addItem', {
         id,
         value: passedValue,
-	label: passedLabel,
+        label: passedLabel,
       });
     }
 
@@ -1962,7 +1962,7 @@ class Choices {
       triggerEvent(this.passedElement, 'removeItem', {
         id,
         value,
-	label,
+        label,
       });
     }
 

index.html

@@ -256,6 +256,11 @@ <h2>Single select input</h2>
         <option value="Queens">Queens</option>
         <option value="Staten Island">Staten Island</option>
       </select>
+
+      <label for="label-event">Use label in event (add/remove)</label>
+      <select id="choices-select" multiple></select>
+      <p id="message"></p>
+
     </div>
   </div>
   <script>
@@ -451,6 +456,30 @@ <h2>Single select input</h2>
       });
 
       var boroughs = new Choices(document.getElementById('boroughs')).disable();
+
+/* Use label on event */
+      var choicesSelect = new Choices('#choices-select', {
+        search: false,
+        removeItemButton: true,
+        choices: [
+          {value: 'One', label: 'Label One'},
+          {value: 'Two', label: 'Label Two', disabled: true},
+          {value: 'Three', label: 'Label Three'},
+        ],
+      }).setChoices([
+        {value: 'Four', label: 'Label Four', disabled: true},
+        {value: 'Five', label: 'Label Five'},
+        {value: 'Six', label: 'Label Six', selected: true},
+      ], 'value', 'label', false);
+      function useLabelOnAddItem (event) {
+		document.getElementById('message').innerHTML = 'You just added ' + event.detail.label;
+      };
+      function useLabelOnRemoveItem (event) {
+		document.getElementById('message').innerHTML = 'You just removed ' + event.detail.label;
+      };
+      choicesSelect.passedElement.addEventListener('addItem',useLabelOnAddItem);
+      choicesSelect.passedElement.addEventListener('removeItem',useLabelOnRemoveItem);
+/* End of use label on event*/
     });
   </script>