Choice JS

In this method, selecting only one option from a lots of options while only using up as much space as a single option excepted. For more details

A Basic
HTML Code
<select id="choices-basic" class="select2-basic-single js-states form-select form-control bg-white dark:bg-dark-card
  border dark:border-secondary-600 p-2 px-3 rounded appearance-none" name="state" style="width: 100%;">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
Script
const choicebasic = document.querySelector('#choices-basic')
    if (choicebasic) {
      new Choices(choicebasic, {
      searchEnabled: false,
      removeItemButton: true,
  })
}
Multiple Choice
HTML Code
<select class="select2-placeholder select2-option-creation form-control bg-white dark:bg-dark-card rounded
    focus:border-primary-500 border dark:border-secondary-600 p-2 px-3 w-full choices-multiple-remove-button"
    multiple="multiple">
    <option selected="selected">Choice 1</option>
    <option>Choice 2</option>
    <option>Choice 3</option>
    <option>Choice 4</option>
</select>
Script
const multipleCancelButton = document.querySelectorAll('.choices-multiple-remove-button')
if (multipleCancelButton) {
  Array.from(multipleCancelButton, (elem) => {
    window.choise = new Choices(elem, {
      removeItemButton: true
    })
  });
}
Previous Next