1.2.2 • Public • Published

    widjet-select-multiple Build Status codecov

    A widget to make multiple select more user friendly.


    npm install widjet-select-multiple --save


    import widgets from 'widjet'
    import 'widjet-select-multiple'
    widgets('select-multiple', 'select[multiple]', {on: 'load'})

    The select-multiple widget operates on select inputs with the multiple attribute defined. It replaces the traditionnal list UI with a new DOM you can style as you see fit. From a single select element you end up with a div containing the original select, a new select that displays only the values that are not selected yet and another div containing the selected values represented as divs with a close button in them (this is the default value formatting, but it can be change through options or data attributes).

    The widget behaviour is:

    • When an item is selected in the single select, that value is selected in the multiple select, disabled in the single select and displayed in the selected values div using the formatting function.
    • When clicking on the close button the inverse process is performed, the option is unselected in the multiple select, enabled in the single select and removed from the selected values div.

    Custom Attributes

    Name Type Description
    data-format-value string The name of a function defined in the options object that will be used as the value formatting function.


    Option Type Description
    wrapperClass string The class name to use for the wrapper div around the initial select. Defaults to select-multiple.
    itemsWrapperClass string The class name to use for the selected values wrapper. Defaults to values.
    itemClass string The class name for the selected values div. Defaults to option.
    itemLabelClass string The class name for the selected value labels. Defaults to label.
    itemCloseClass string The class name for the selected value close buttons. This class is used as the selector to bind events handler so that the selected values can be unselected when clicking on the buttons. Defaults to close.
    itemCloseIconClass string The class name for the close button icons. Defaults to fa fa-close.
    formatValue function A function that takes an option as argument and should return the DOM element that will represent this option in the selected values div.


    npm i widjet-select-multiple

    DownloadsWeekly Downloads






    Unpacked Size

    108 kB

    Total Files


    Last publish


    • abe33