ibnujakaria/multiple-select-js

A simple javascript library for multiple select component that supports Bootstrap 4 natively.

Multiple Select

A simple javascript (non jQuery) library for multiple select component that supports Bootstrap 4 natively.

Installation

You can install multiple-select-js in 3 options:

Using NPM

npm i multiple-select-js

And then, simply import it using es6 syntax.

import MultipleSelect from 'multiple-select-js'

Using CDN

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Multiple Select JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/multiple-select-js/dist/css/multiple-select.css">
<script src="https://cdn.jsdelivr.net/npm/multiple-select-js/dist/js/multiple-select.js"></script>

Manually Download

<link href="/dist/css/multiple-select.css" rel="stylesheet">
<script src="/dist/js/multiple-select.js"></script>

Basic Usage

For single select.

<div class="form-group">
  <label for="select-language">Single Select</label>
  <select id="select-language">
    <option value="php">PHP</option>
    <option value="javascript">Javascript</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
  </select>
</div>

new MultipleSelect('#select-language', {
  placeholder: 'Select Language'
})

For Multiple select you can simply add multiple attribute to the select tag.

<div class="form-group">
  <label for="select-language">Multiple Select</label>
  <select id="select-multiple-language" multiple>
    <option value="php">PHP</option>
    <option value="javascript">Javascript</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
  </select>
</div>

new MultipleSelect('#select-multiple-language', {
  placeholder: 'Select Language'
})

Documentation

Go to this link for the complete documentation.

License

The Multiple Select Js library is open-source software licensed under the MIT license.

multiple-select-js's Issues

Dropdown position: top, bottom.

Automatically change as the window scroll depending on the available space.

Reset multiselect dropdown using jquery

How can i deselect all option from dropdown when click on button using jquery?

Translate 'x selected'

Is there any option to translate label 'selected' in placeholder?

Listen to `onchange` event and set the value accordingly

This is because when we change the value of native <select> tag through javascript, the library doesn't know and doesn't rerender the component.

Handle `<optgroup>` tag

Distinguish webpack configuration between production and development

Listen to `onchange` event and set the value accordingly

This is because when we change the value of native <select> tag through javascript, the library doesn't know and doesn't rerender the component.

Cursor:pointer when button is hovered

Consider to Using Native Javascript instead of Vue

Display selected items in badges

Overflow Y when the dropdown collides the window

Navigation by keyboard

Pressing Arrow up and down for navigating between item in the list

Handling Disabled Option

The native <option disabled> element should be disabled too in the dropdown select.