Skip to content

jQuery dropdownlist multiselect

Maikel Bos edited this page Feb 20, 2020 · 2 revisions

By default, jQuery-dropdownlist creates a single-select dropdownlist with hidden input fields. If the data-multiselect attribute is present and is not set to false, a multiselect dropdownlist will be created. This will generate visible checkboxes that signify whether or not an element is selected. The checkboxes can be hidden without hindering functionality.

If no items are selected, a text indicating this will be displayed. To override this you can use the data-empty-text attribute.

<div id="example-dropdown" data-multiselect="true" data-empty-text="Choose an option">
    <div>Choice number 1</div>
    <div>Option 1a</div>
    <div>Second choice</div>
    <div>Final option</div>
</div>

<script type="text/javascript">
    $('#example-dropdown').dropdownlist();
</script>
Clone this wiki locally