## Properties

Name | Type | Default
--- | --- | ---
disabled | Boolean | false
Enables/disables the jqxDropDownList. #### Code example Initialize a jqxDropDownList with the `disabled` property specified.
    $("#jqxDropDownList").jqxDropDownList({ disabled: true });
width | Number/String | null
Gets or sets the jqxDropDownList width. #### Code example Initialize a jqxDropDownList with the `width` property specified.
    $("#jqxDropDownList").jqxDropDownList({ width: '250px', height: '250px' });
height | Number/String | null
Gets or sets the jqxDropDownList height. #### Code example Initialize a jqxDropDownList with the `height` property specified.
    $("#jqxDropDownList").jqxDropDownList({ width: '250px', height: '250px' });
selectedIndex | Number | -1
Gets or sets the selected index. #### Code example Initialize a jqxDropDownList with the `selectedIndex` property specified.
    $("#jqxDropDownList").jqxDropDownList({selectedIndex: 2 });
source | Array | null
Gets or sets the items source. #### Code example Initialize a jqxDropDownList with the `source` property specified.
    var data = [
    "Affogato",
    "Americano",
    "Bicerin"
    ];
    $("#jqxDropDownList").jqxDropDownList({source: data});
Binding using the jqx.dataAdapter(requires jqxdata.js):
    // url of the data.
    var url = "../sampledata/customers.txt";
    var parentsLength = $("#jqxWidget").parents().length;
    if (parentsLength > 3) {
        url = 'demos/sampledata/customers.txt';
    }

    // prepare the data. Set the datatype to 'json', 'xml', 'tsv', 'array', 'local' or 'csv.
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'CompanyName' },
            { name: 'ContactName' }
        ],
        id: 'id',
        url: url
    };
    // create a new instance of the jqx.dataAdapter.
    var dataAdapter = new $.jqx.dataAdapter(source);

    // Create a jqxListBox
    $("#jqxWidget").jqxDropDownList({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250, theme: theme });
displayMember | String | ""
Sets the displayMember of the Items. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'source' property. #### Code example Initialize a jqxDropDownList with the `displayMember` property specified.
    $("#jqxDropDownList").jqxDropDownList({displayMember: 'firstName'});
valueMember | String | ""
Sets the valueMember of the Items. The valueMember specifies the name of an object property to set as a 'value' of the list items. The name is contained in the collection specified by the 'source' property. #### Code example Initialize a jqxDropDownList with the `valueMember` property specified.
    $("#jqxDropDownList").jqxDropDownList({valueMember: 'lastName'});
scrollBarSize | Number | 17
Gets or sets the scrollbars size. #### Code example Initialize a jqxDropDownList with the `scrollBarSize` property specified.
    $("#jqxDropDownList").jqxDropDownList({scrollBarSize:25});
enableHover | Boolean | true
Enables/disables the hover state. #### Code example Initialize a jqxDropDownList with the `enableHover` property specified.
    $("#jqxDropDownList").jqxDropDownList({enableHover: false});
incrementalSearch | Boolean | true
Gets or sets the incrementalSearch property. An incremental search begins searching as soon as you type the first character of the search string. As you type in the search string, jqxDropDownList automatically selects the found item. #### Code example Initialize a jqxDropDownList with the `incrementalSearch` property specified.
    $("#jqxDropDownList").jqxDropDownList({incrementalSearch: false});
incrementalSearchDelay | Number | 700
Gets or sets the incrementalSearchDelay property. The incrementalSearchDelay specifies the time-interval in milliseconds after which the previous search string is deleted. The timer starts when you stop typing. #### Code example Initialize a jqxDropDownList with the `incrementalSearchDelay` property specified.
    $("#jqxDropDownList").jqxDropDownList({incrementalSearchDelay: 400});
searchMode | String | startswith
Gets or sets the item incremental search mode. When the user types some text in a focused DropDownList, the jqxListBox widget tries to find the searched item using the entered text and the selected search mode. Possible Values: 'none, 'contains', 'containsignorecase', 'equals', 'equalsignorecase', 'startswithignorecase', 'startswith', 'endswithignorecase', 'endswith' #### Code example Initialize a jqxListBox with the `searchMode` property specified.
    $("#jqxDropDownList").jqxDropDownList({searchMode: 'contains' });
enableSelection | Boolean | true
Enables/disables the selection. #### Code example Initialize a jqxDropDownList with the `enableSelection` property specified.
    $("#jqxDropDownList").jqxDropDownList({enableSelection:false});
enableBrowserBoundsDetection | Boolean | false
autoOpen | Boolean | false
Gets or sets whether the DropDown is automatically opened when the mouse cursor is moved over the widget. #### Code example Initialize a jqxDropDownList with the `autoOpen` property specified.
    $("#jqxDropDownList").jqxDropDownList({ autoOpen: true });
Gets or sets whether the dropdown detects the browser window's bounds and automatically adjusts the dropdown's position. #### Code example Initialize a jqxDropDownList with the `enableBrowserBoundsDetection` property specified.
    $("#jqxDropDownList").jqxDropDownList({enableBrowserBoundsDetection: false});
dropDownHorizontalAlignment | Boolean | 'left'
Sets the DropDown's alignment. Possible values: 'left' and 'right'. #### Code example
    $('#jqxDropDownList').jqxDropDownList({ dropDownHorizontalAlignment: 'right'});
dropDownHeight | Number | 200
Gets or sets the height of the jqxDropDownList's ListBox displayed in the widget's DropDown. #### Code example Initialize a jqxDropDownList with the `dropDownHeight` property specified.
    $("#jqxDropDownList").jqxDropDownList({dropDownHeight: 250});
dropDownWidth | Number | 200
Gets or sets the width of the jqxDropDownList's ListBox displayed in the widget's DropDown. #### Code example Initialize a jqxDropDownList with the `dropDownWidth` property specified.
    $("#jqxDropDownList").jqxDropDownList({dropDownWidth: 250});
autoDropDownHeight | Boolean | false
Gets or sets whether the height of the jqxDropDownList's ListBox displayed in the widget's DropDown is calculated as a sum of the items heights. #### Code example Initialize a jqxDropDownList with the `autoDropDownHeight` property specified.
    $("#jqxDropDownList").jqxDropDownList({autoDropDownHeight: true});
itemHeight | Number | -1
Gets or sets the height of the jqxDropDownList Items. When the itemHeight == - 1, each item's height is equal to its desired height. #### Code example Initialize a jqxDropDownList with the `itemHeight` property specified.
    $("#jqxDropDownList").jqxDropDownList({itemHeight: 25});
renderer | Function | null
Callback function which is called when an item is rendered. By using the renderer function, you can customize the look of the list items. #### Code example Set the renderer property
    $('#dropdownlist').jqxDropDownList({renderer: function (index, label, value) {
            var datarecord = data[index];
            return datarecord.firstname + " " + datarecord.lastname;
        }
    });
selectionRenderer | Function | null
Callback function which is called when the selected item is rendered in the jqxDropDownList's content area. By using the selectionRenderer function, you can customize the look of the selected item. #### Code example Set the renderer property
    $('#dropdownlist').jqxDropDownList({selectionRenderer: function (htmlString) {
            return "My String";
        }
    });
openDelay | Number | 350
Sets the delay of the 'open' animation. #### Code example Set the openDelay property
    $('#dropdownlist').jqxDropDownList({openDelay: 200});
closeDelay | Number | 400
Sets the delay of the 'close' animation. #### Code example Set the closeDelay property
    $('#dropdownlist').jqxDropDownList({closeDelay: 200});
animationType | String | 'slide'
Sets the type of the animation. Possible values: 'fade', 'slide' and 'none'. #### Code example Set the animationType property
    $('#dropdownlist').jqxDropDownList({animationType: 'none'});
## Events
select | Event |
This event is triggered when the user selects an item. #### Code example Bind to the select event by type: jqxDropDownList.
    $('#jqxDropDownList').bind('select', function (event) { // Some code here. });
unselect | Event |
This event is triggered when the user unselects an item. #### Code example Bind to the unselect event by type: jqxDropDownList.
    $('#jqxDropDownList').bind('unselect', function (event) { // Some code here. });
change | Event |
This event is triggered when the user selects an item. #### Code example Bind to the change by type: jqxDropDownList.
    $('#jqxDropDownList').bind('change', function (event) { // Some code here. });
open | Event |
This event is triggered when the popup ListBox is opened. #### Code example Bind to the open by type: jqxDropDownList.
    $('#jqxDropDownList').bind('open', function (event) { // Some code here. });
close | Event |
This event is triggered when the popup ListBox is closed. #### Code example Bind to the close by type: jqxDropDownList.
    $('#jqxDropDownList').bind('close', function (event) { // Some code here. });
checkChange | Event |
This event is triggered when an item is checked/unchecked. #### Code example Bind to the checkChange by type: jqxDropDownList.
    $("#dropdownlist").bind('checkChange', function (event) {
        if (event.args) {
            var item = event.args.item;
            var value = item.value;
            var label = item.label;
            var checked = item.checked;
        }
    });
## Methods
addItem | Method |
Adds a new item to the jqxDropDownList. Returns 'true', if the new item is added or false if the item is not added. #### Code example Invoke the addItem method.
    // @param String
    $("#jqxDropDownList").jqxDropDownList('addItem', 'jQuery' );
insertAt | Method |
Inserts a new item to the jqxDropDownList. #### Code example Invoke the insertAt method.
    // @param String
    // @param Number
    $("#jqxDropDownList").jqxDropDownList('insertAt', 'jQuery', 1 );
removeAt | Method |
Removes an item from the jqxDropDownList. Index is a number of the item to remove #### Code example Invoke the removeAt method.
    // @param Number
    $("#jqxDropDownList").jqxDropDownList('removeAt', 3 );
disableAt | Method |
Disables an item by index. Index is a number. #### Code example Invoke the disableAt method.
    // @param Number
    $("#jqxDropDownList").jqxDropDownList('disableAt', 8 );
enableAt | Method |
Enables a disabled item by index. Index is a number. #### Code example Invoke the enableAt method.
    // @param Number
    $("#jqxDropDownList").jqxDropDownList('enableAt', 3 );
ensureVisible | Method |
Ensures that an item is visible. index is number. When necessary, the jqxDropDownList scrolls to the item to make it visible. #### Code example Invoke the ensureVisible method.
    // @param Number
    $("#jqxDropDownList").jqxDropDownList('ensureVisible', 2 );
getItem | Method |
Gets item by index. #### Code example Invoke the getItem method.
    // @param Number
    var item = $("#jqxDropDownList").jqxDropDownList('getItem', 1 );
getItems | Method |
Gets all items. #### Code example Invoke the getItems method.
    var items = $("#jqxDropDownList").jqxDropDownList('getItems');
getCheckedItems | Method |
Gets the checked items. #### Code example Invoke the getCheckedItems method.
    var items = $("#jqxDropDownList").jqxDropDownList('getCheckedItems');
getSelectedItem | Method |
Gets the selected item. #### Code example Invoke the getSelectedItem method.
    // @param Number
    var item = $("#jqxDropDownList").jqxDropDownList('getSelectedItem');
getSelectedIndex | Method |
Gets the index of the selected item. #### Code example Invoke the getSelectedIndex method.
    // @param Number
    var index = $("#jqxDropDownList").jqxDropDownList('getSelectedIndex');
selectIndex | Method |
Selects an item by index. #### Code example Invoke the selectIndex method.
    // @param Number
    $("#jqxDropDownList").jqxDropDownList('selectIndex', 0 );
unselectIndex | Method |
Unselects item by index. #### Code example Invoke the unselectIndex method.
    // @param Number
    $("#jqxDropDownList").jqxDropDownList('unselectIndex', 5 );
clearSelection | Method |
Clears all selected items. #### Code example Invoke the clearSelection method.
    $("#jqxDropDownList").jqxDropDownList('clearSelection');
clear | Method |
Clears all items. #### Code example Invoke the clear method.
    $("#jqxDropDownList").jqxDropDownList('clear');
close | Method |
Hides the popup listbox. #### Code example Invoke the close method.
    $("#jqxDropDownList").jqxDropDownList("close" );
open | Method |
Shows the popup listbox. #### Code example Invoke the open method.
    $("#jqxDropDownList").jqxDropDownList('open' );
checkIndex | Method |
Checks a list item when the 'checkboxes' property value is true. #### Code example Invoke the 'checkIndex' method.
    $("#jqxDropDownList").jqxDropDownList('checkIndex', 0);
uncheckIndex | Method |
Unchecks a list item when the 'checkboxes' property value is true. #### Code example Invoke the 'uncheckIndex' method.
    $("#jqxDropDownList").jqxDropDownList('uncheckIndex', 0);
indeterminateIndex | Method |
indeterminates a list item when the 'checkboxes' property value is true. #### Code example Invoke the 'indeterminateIndex' method.
    $("#jqxDropDownList").jqxDropDownList('indeterminateIndex', 0);
checkAll | Method |
Checks all list items when the 'checkboxes' property value is true. #### Code example Invoke the 'checkAll' method.
    $("#jqxDropDownList").jqxDropDownList('checkAll');
uncheckAll | Method |
Unchecks all list items when the 'checkboxes' property value is true. #### Code example Invoke the 'uncheckAll' method.
    $("#jqxDropDownList").jqxDropDownList('uncheckAll');
setContent | Method |
Sets the content of the DropDownList. #### Code example Invoke the 'setContent' method.
    $("#jqxDropDownList").jqxDropDownList('setContent', 'My Content');
loadFromSelect | Method |
Loads list items from a 'select' tag. #### Code example Invoke the 'loadFromSelect' method.
    $("#jqxDropDownList").jqxDropDownList('loadFromSelect', 'select');
'select' is the id of a select tag. Code Example:
       <select style='height: 25px; width: 200px; margin-left: 30px;' id='select'>                    <option>Affogato</option>                    <option>Americano</option>                    <option>Bicerin</option>                    <option>Breve</option>                    <option>Café Bombón</option>                    <option>Caffé Corretto</option>                    <option>Café Crema</option>                    <option>Caffé Latte</option>                    <option>Caffé macchiato</option>                    <option>Café mélange</option>                    <option>Coffee milk</option>                    <option>Cafe mocha</option>                    <option>Cappuccino</option>                    <option>Carajillo</option>                    <option>Cuban espresso</option>                    <option>Espresso</option>                    <option>The Flat White</option>                    <option>Frappuccino</option>                    <option>Galao</option>                    <option>Greek frappé coffee</option>                    <option>Iced Coffee﻿</option>                    <option>Indian filter coffee</option>                    <option>Instant coffee</option>                    <option>Irish coffee</option>                    <option>Liqueur coffee</option>                </select>