jQuery dropdownlist defaults and options

The jQuery-dropdownlist is created with ease of use in mind. Almost all options can be configured using data-attributes. However, sometimes there is a need to override the options explicitly or influence the default behaviour. This is possible both by changing the default options, and by explicitly passing the options when first creating the dropdownlist.

All defaults and options are defined as functions to make them as flexible as possible.

<div id="example-dropdown" class="multiselect">
    <div>Choice number 1</div>
    <div>Option 1a</div>
    <div>Second choice</div>
    <div>Final option</div>
</div>

<script type="text/javascript">
    // Override the default to look at the class instead of the data-attribute
    $.fn.dropdownlist.defaults.isMultiselect = function(element) {
        return $(element).hasClass('multiselect');
    }
    
    // For this specific dropdownlist, simply create a single-select dropdownlist
    $('#example-dropdown').dropdownlist({
        isMultiselect: function(element) {
            return false;
        }
    });
</script>

Options

Below are all options that you can provide your own implementation of.

• getItems(element) should return the items inside the element to make into dropdownlist-items
• getSelectAllItem(element) should return the item inside the element that should function as the select all option
• isItemSelected(item) should return true for elements that should be selected when creating the dropdownlist
• getFieldName(element) should return the field name of the input fields that are created for items
• isDisabled(element) should return true if the dropdownlist needs to be disabled on initialization
• getItemValue(item) should return the value of an item
• getItemText(item) should return the text value of an item to be displayed in the closed dropdownlist
• getEmptyText(element) should return the text that is displayed in a multiselect dropdownlist when no items are selected
• isMultiselect(element) should return true for elements which should be multiselect
• hasTextSearch(element) should return true for elements which should have a text search
• isTextSearchInsideSelector(element) should return true for elements which should have the text search inside the selector instead of inside the list
• itemMatchesTextSearch(item, searchText) should return true for items that should be displayed when filtering on the search text
• hasDynamicPositioning(element) should return true if the dropdownlist should have dynamic positioning upwards or downwards with adjusted height as needed
• getContainerAttributes() should return an object with html attributes to apply to the containers (top-level element) of dropdownlists
• getSelectorAttributes() should return an object with html attributes to apply to the selectors of dropdownlists
• getSelectorTextAttributes() should return an object with html attributes to apply to the text element inside the selectors of dropdownlists
• getSelectorToggleAttributes() should return an object with html attributes to apply to the toggle arrow element inside the selectors of dropdownlists
• getListAttributes() should return an object with html attributes to apply to the list container of the elements
• getTextSearchAttributes() should return an object with html attributes to apply to the text search of dropdownlists
• getInputAttributes() should return an object with html attributes to apply to the input for items inside the elements