jQuery dropdownlist manipulating the dropdownlist after creating - maikelbos0/VDT GitHub Wiki

It's possible to manipulate the dropdownlist via client-side javascript. The dropdownlist plugin can be called with a callback parameter function. The function provides access to the Dropdownlist object via this as a first parameter. It is possible to call the dropdownlist function multiple times on a selector; this will only create the dropdown once but provide access to the dropdownlist on the first and on subsequent calls.

<script type="text/javascript">
    var selectedValues;
    
    $('#example-dropdown').dropdownlist(function(dropdown) {
        // this refers to the dropdownlist object
        selectedValues = this.getSelectedValues();
        
        // parameter dropdown also refers to the dropdownlist object
        dropdown.clearSelectedItems();
    });
</script>

When also providing options to the dropdownlist, the callback function becomes the second parameter of the call to the dropdownlist function.

<script type="text/javascript">
    var options = {
        isMultiselect: function() { return true; }
    };
    $('#example-dropdown').dropdownlist(options, function () {
        console.log(this.getSelectedValues());
    });
</script>

Please note that this gives you access to the dropdownlist internal properties. Manipulating these properties is unsupported and can create unexpected side effects.

Functions

  • General
    • remove() removes the dropdownlist functionality and restores the elements to their original condition
    • enable() enables the dropdownlist and its form fields if it is currently disabled
    • disable() disables the dropdownlist and its form fields if it is currently enabled
  • Visibility
    • isVisible() returns true if the dropdownlist is expanded or false if it is not
    • toggle() expands the dropdownlist if it is hidden or hides the dropdownlist if it is visible
    • hide() hides the dropdownlist if it is visible; it triggers the dropdownlist.hidden event if it was
    • show() shows the dropdownlist if it is hidden; it triggers the dropdownlist.shown event if it was
  • Selection
    • getSelectedItems() returns a jQuery object containing currently selected items
    • getSelectedValues() returns an array of currently selected values
    • setSelectedItems(selector) sets the selected items to only the items matching the provided selection or selector
    • selectAllItems() selects all items
    • clearSelectedItems() deselects all items
    • areAllItemsSelected() returns true if all items are selected, otherwise false
  • Internal functions
    • createElement(tagName, className, attr1, ..., attrN) creates elements with the appropriate attributes
    • scrollToActiveItem() scrolls to the currently active item if there is one and the browser supports this
    • setSelectorText() sets the text of the selector to the text of the current selected values
⚠️ **GitHub.com Fallback** ⚠️