Documentation

Ctrl+K
Vue

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 class="form-control" id="choices-basic">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

Script

const choicebasic = document.querySelector('#choices-basic')
if (choicebasic) {
  new Choices(choicebasic, {
    searchEnabled: false,
    removeItemButton: true,
  })
}
Multiple Choice

HTML Code

<select multiple class="form-control choices-multiple-remove-button">
    <option value="Choice 1" selected>Choice 1</option>
    <option value="Choice 2">Choice 2</option>
    <option value="Choice 3">Choice 3</option>
    <option value="Choice 4">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