Sets the type of the animation.

Possible Values:

'fade'

'slide'

'none'

Code example

Set the animationType property

$('#jqxComboBox').jqxComboBox({animationType: 'none'});
 

Get the animationType property.

var animationType = $('#jqxComboBox').jqxComboBox('animationType');

Sets or gets the whether the 'autoComplete' feature is enabled or disabled. When this feature is enabled, the jqxComboBox displays in the popup listbox, only the items that match the searched text.

Code example

Set the autoComplete property.

$("#jqxComboBox").jqxComboBox({autoComplete: true }); 

Get the autoComplete property.

var autoComplete = $('#jqxComboBox').jqxComboBox('autoComplete');

Sets or gets whether the DropDown is automatically opened when the mouse cursor is moved over the widget.

Code example

Set the autoOpen property.

$("#jqxComboBox").jqxComboBox({ autoOpen: true });
 

Get the autoOpen property.

var autoOpen = $('#jqxComboBox').jqxComboBox('autoOpen');

Sets or gets whether items will wrap when they reach the width of the dropDown.

Code example

Set the autoItemsHeight property.

$("#jqxComboBox").jqxComboBox({autoItemsHeight: true}); 

Get the autoItemsHeight property.

var autoItemsHeight = $('#jqxComboBox').jqxComboBox('autoItemsHeight'); 

Sets or gets whether the height of the jqxComboBox's ListBox displayed in the widget's DropDown is calculated as a sum of the items heights.

Code example

Set the autoDropDownHeight property.

$("#jqxComboBox").jqxComboBox({autoDropDownHeight: true}); 

Get the autoDropDownHeight property.

var autoDropDownHeight = $('#jqxComboBox').jqxComboBox('autoDropDownHeight');

Sets the delay of the 'close' animation.

Code example

Set the closeDelay property

$('#jqxComboBox').jqxComboBox({closeDelay: 200});
 

Get the closeDelay property.

var closeDelay = $('#jqxComboBox').jqxComboBox('closeDelay');

Determines whether checkboxes will be displayed next to the list items. (The feature requires jqxcheckbox.js)

Code example

Set the checkboxes property.

$("#jqxComboBox").jqxComboBox({checkboxes:true}); 

Get the checkboxes property.

var checkboxes = $('#jqxComboBox').jqxComboBox('checkboxes');

Enables/disables the jqxComboBox.

Code example

Set the disabled property.

$("#jqxComboBox").jqxComboBox({ disabled: true }); 

Get the disabled property.

var disabled = $('#jqxComboBox').jqxComboBox('disabled');

Sets or gets 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

Set the displayMember property.

$("#jqxComboBox").jqxComboBox({displayMember: 'firstName'});

Get the displayMember property.

var displayMember = $('#jqxComboBox').jqxComboBox('displayMember');

Sets or gets the DropDown's alignment.

Possible Values:

'left'

'right'

Code example

$('#jqxComboBox').jqxComboBox({ dropDownHorizontalAlignment: 'right'}); 

Get the dropDownHorizontalAlignment property.

var dropDownHorizontalAlignment = $('#jqxComboBox').jqxComboBox('dropDownHorizontalAlignment');

Sets or gets the DropDown's alignment.

Possible Values:

'top'

'bottom'

Code example

$('#jqxComboBox').jqxComboBox({ dropDownVerticalAlignment: 'top'}); 

Get the dropDownVerticalAlignment property.

var dropDownVerticalAlignment = $('#jqxComboBox').jqxComboBox('dropDownVerticalAlignment');

Sets or gets the height of the jqxComboBox's ListBox displayed in the widget's DropDown.

Code example

Set the dropDownHeight property.

$("#jqxComboBox").jqxComboBox({dropDownHeight: 250}); 

Get the dropDownHeight property.

var dropDownHeight = $('#jqxComboBox').jqxComboBox('dropDownHeight');

Sets or gets the width of the jqxComboBox's ListBox displayed in the widget's DropDown.

Code example

Set the dropDownWidth property.

$("#jqxComboBox").jqxComboBox({dropDownWidth: 250}); 

Get the dropDownWidth property.

var dropDownWidth = $('#jqxComboBox').jqxComboBox('dropDownWidth');

Enables/disables the hover state.

Code example

Set the enableHover property.

$("#jqxComboBox").jqxComboBox({enableHover: false}); 

Get the enableHover property.

var enableHover = $('#jqxComboBox').jqxComboBox('enableHover');

Enables/disables the selection.

Code example

Set the enableSelection property.

$("#jqxComboBox").jqxComboBox({enableSelection:false}); 

Get the enableSelection property.

var enableSelection = $('#jqxComboBox').jqxComboBox('enableSelection');

Sets or gets whether the dropdown detects the browser window's bounds and automatically adjusts the dropdown's position.

Code example

Set the enableBrowserBoundsDetection property.

$("#jqxComboBox").jqxComboBox({enableBrowserBoundsDetection: false}); 

Get the enableBrowserBoundsDetection property.

var enableBrowserBoundsDetection = $('#jqxComboBox').jqxComboBox('enableBrowserBoundsDetection');

Sets or gets the jqxComboBox height.

Code example

Set the height property.

$("#jqxComboBox").jqxComboBox({ height: '250px' });
 

Get the height property.

var height = $('#jqxComboBox').jqxComboBox('height');

Sets or gets the height of the jqxComboBox Items. When the itemHeight == - 1, each item's height is equal to its desired height.

Code example

Set with the itemHeight property.

$("#jqxComboBox").jqxComboBox({itemHeight: 25}); 

Get the itemHeight property.

var itemHeight = $('#jqxComboBox').jqxComboBox('itemHeight');

Determines whether the jqxComboBox is in multi-select mode.

Code example

Set the multiSelect property.

$("#jqxComboBox").jqxComboBox({multiSelect: true }); 

Get the multiSelect property.

var multiSelect = $('#jqxComboBox').jqxComboBox('multiSelect');

Determines the minimum number of characters that need to be entered by the user for search in remote data source when remoteAutoComplete property is set to true.

Code example

Set the minLength property.

$("#jqxComboBox").jqxComboBox({minLength: 3 }); 

Get the minLength property.

var minLength = $('#jqxComboBox').jqxComboBox('minLength');

Sets or gets the delay of the 'open' animation.

Code example

Set the openDelay property

$('#jqxComboBox').jqxComboBox({openDelay: 200});
 

Get the openDelay property.

var openDelay = $('#jqxComboBox').jqxComboBox('openDelay');

Sets or gets the popup's z-index.

Code example

Set the popupZIndex property.

$("#jqxComboBox").jqxComboBox({popupZIndex: 999999});

Get the popupZIndex property.

var zIndex = $('#jqxComboBox').jqxComboBox('popupZIndex'); 

Sets or gets the input field's place holder.

Code example

Set the placeHolder property.

$("#jqxComboBox").jqxComboBox({placeHolder: "Enter text" });

Get the placeHolder property.

var placeHolder = $('#jqxComboBox').jqxComboBox('placeHolder'); 

Determines whether the items displayed in the popup come from a remote data source. When this property is set to true, the jqxComboBox calls the 'search' callback function when the user types into the input field.

Code example

Set the remoteAutoComplete property.

$("#jqxComboBox").jqxComboBox({remoteAutoComplete: true }); 

Get the remoteAutoComplete property.

var remoteAutoComplete = $('#jqxComboBox').jqxComboBox('remoteAutoComplete');

Determines the delay between two keystrokes. The search callback function is called on timeout. The value is specified in milliseconds.

Code example

Set the remoteAutoCompleteDelay property.

$("#jqxComboBox").jqxComboBox({remoteAutoCompleteDelay: 500 }); 

Get the remoteAutoCompleteDelay property.

var remoteAutoCompleteDelay = $('#jqxComboBox').jqxComboBox('remoteAutoCompleteDelay');

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

 $('#jqxComboBox').jqxComboBox({renderer: function (index, label, value) {
 var datarecord = data[index];
 return datarecord.firstname + " " + datarecord.lastname;
 }
 });
 

Get the renderer property.

var renderer = $('#jqxComboBox').jqxComboBox('renderer');

Callback function which is called when the selected item is rendered. By using the renderSelectedItem function, you can customize the displayed text in the ComboBox's input field.

Code example

Set the renderSelectedItem property

 renderSelectedItem: function(index, item)
{
 var item = dataAdapter.records[index];
 if (item != null) {
 var label = item.name + ", " + item.countryName + ", " + item.adminName1;
 return label;
 }
 return ""; 
}
 

Get the renderSelectedItem property.

var renderSelectedItem = $('#jqxComboBox').jqxComboBox('renderSelectedItem');

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxComboBox').jqxComboBox({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxComboBox').jqxComboBox('rtl'); 

Sets or gets the selected index.

Code example

Set the selectedIndex property.

$("#jqxComboBox").jqxComboBox({selectedIndex: 2 }); 

Get the selectedIndex property.

var selectedIndex = $('#jqxComboBox').jqxComboBox('selectedIndex');

Determines whether the jqxComboBox shows its dropdown button.

Code example

Set the showArrow property.

$("#jqxComboBox").jqxComboBox({showArrow: false }); 

Get the showArrow property.

var showArrow = $('#jqxComboBox').jqxComboBox('showArrow');

Determines whether the jqxComboBox shows the items close buttons in multi-select mode.

Code example

Set the showCloseButtons property.

$("#jqxComboBox").jqxComboBox({showCloseButtons: false }); 

Get the showCloseButtons property.

var showCloseButtons = $('#jqxComboBox').jqxComboBox('showCloseButtons');

Sets or gets the item search mode. When the user types into the edit field, the jqxComboBox 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

Set the searchMode property.

$("#jqxComboBox").jqxComboBox({searchMode: 'contains' }); 

Get the searchMode property.

var searchMode = $('#jqxComboBox').jqxComboBox('searchMode');

Callback function which is called when the 'remoteAutoComplate' property is set to true and the user types into the ComboBox's input field.

Code example

Set the search property.

$("#jqxComboBox").jqxComboBox(
{
 width: 250,
 height: 25,
 source: dataAdapter,
 remoteAutoComplete: true,
 selectedIndex: 0,
 displayMember: "name",
 valueMember: "countryName",
 renderer: function (index, label, value) {
 var item = dataAdapter.records[index];
 if (item != null) {
 var label = item.name + ", " + item.countryName + ", " + item.adminName1;
 return label;
 }
 return "";
 },
 renderSelectedItem: function(index, item)
 {
 var item = dataAdapter.records[index];
 if (item != null) {
 var label = item.name + ", " + item.countryName + ", " + item.adminName1;
 return label;
 }
 return ""; 
 },
 search: function (searchString) {
 dataAdapter.dataBind();
 }
});
 

Get the search property.

var search = $('#jqxComboBox').jqxComboBox('search');

Sets or gets the items source.

Code example

Set a jqxComboBox with the source property.

var data = [

"Affogato",

"Americano",

"Bicerin"

];

$("#jqxComboBox").jqxComboBox({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").jqxComboBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250});

Get the source property.

var source = $('#jqxComboBox').jqxComboBox('source');

Sets or gets the scrollbars size.

Code example

Set the scrollBarSize property.

$("#jqxComboBox").jqxComboBox({scrollBarSize:25}); 

Get the scrollBarSize property.

var scrollBarSize = $('#jqxComboBox').jqxComboBox('scrollBarSize');

Determines the button's template as an alternative of the default styles.

Possible Values:

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

Code examples

Set the template property.

$("#jqxComboBox").jqxComboBox({ template: 'primary'});

Get the template property.

var template = $('#jqxComboBox').jqxComboBox('template');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Determines whether an item can be selected in multi-select mode.

Code example

Set the validateSelection property.

$("#jqxComboBox").jqxComboBox({validateSelection: function(itemValue)
 {
 if (itemValue == "Breve")
 {
 return false;
 }
 return true;
 } 
 }); 

Get the validateSelection property.

var validateSelection = $('#jqxComboBox').jqxComboBox('validateSelection');

Sets or gets 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

Set the valueMember property.

$("#jqxComboBox").jqxComboBox({valueMember: 'lastName'});

Get the valueMember property.

var valueMember = $('#jqxComboBox').jqxComboBox('valueMember');

Sets or gets the jqxComboBox's width.

Code example

Set the width property.

$("#jqxComboBox").jqxComboBox({ width: '250px' });
 

Get the width property.

var width = $('#jqxComboBox').jqxComboBox('width');

This event is triggered when the data binding operation is completed.

Code example

Bind to the bindingComplete event by type: jqxComboBox.

$("#jqxComboBox").on('bindingComplete', function (event) {});

This event is triggered when an item is checked/unchecked.

Code example

Bind to the checkChange by type: jqxComboBox.

$("#jqxComboBox").on('checkChange', function (event)
{
 if (event.args) {
 var item = event.args.item;
 var value = item.value;
 var label = item.label;
 var checked = item.checked;
 var checkedItems = $("#jqxComboBox").jqxComboBox('getCheckedItems');
}
});
 

The item object has the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

This event is triggered when the popup ListBox is closed.

Code example

Bind to the close by type: jqxComboBox.

$('#jqxComboBox').on('close', function (event) { // Some code here. });
 

This event is triggered when the user selects an item.

Code example

Bind to the change by type: jqxComboBox.

$('#jqxComboBox').on('change', function (event) 
{
 var args = event.args;
 if (args) {
 // index represents the item's index. 
 var index = args.index;
 var item = args.item;
 // get item's label and value.
 var label = item.label;
 var value = item.value;
 var type = args.type; // keyboard, mouse or null depending on how the item was selected.
}
}); 
 

The item object has the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

This event is triggered when the popup ListBox is opened.

Code example

Bind to the open

$('#jqxComboBox').on('open', function (event) { // Some code here. }); 

This event is triggered when the user selects an item.

Code example

Bind to the select event by type: jqxComboBox.

$('#jqxComboBox').on('select', function (event) 
{
 var args = event.args;
 if (args) {
 // index represents the item's index. 
 var index = args.index;
 var item = args.item;
 // get item's label and value.
 var label = item.label;
 var value = item.value;
 var type = args.type; // keyboard, mouse or null depending on how the item was selected.
}
}); 
 

The item object has the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

This event is triggered when the user unselects an item.

Code example

Bind to the unselect event by type: jqxComboBox.

$('#jqxComboBox').on('unselect', function (event) 
{
 var args = event.args;
 if (args) {
 // index represents the item's index. 
 var index = args.index;
 var item = args.item;
 // get item's label and value.
 var label = item.label;
 var value = item.value;
}
}); 
 

The item object has the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Adds a new item to the jqxComboBox. Returns 'true', if the new item is added or 'false' if the item is not added.

The following fields can be used for the new item:

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

Code example

Invoke the addItem method.

// @param String

$("#jqxComboBox").jqxComboBox('addItem', 'jQuery' ); 

Code example 2

Invoke the addItem method.

// @param Object

$("#jqxComboBox").jqxComboBox('addItem', { label: 'Text' value: 'Id'} ); 

Clears all items.

Code example

Invoke the clear method.

$("#jqxComboBox").jqxComboBox('clear'); 

Clears all selected items.

Code example

Invoke the clearSelection method.

$("#jqxComboBox").jqxComboBox('clearSelection'); 

Clears all items.

Code example

Invoke the clear method.

$("#jqxComboBox").jqxComboBox('clear'); 

Hides the popup listbox.

Code example

Invoke the close method.

$("#jqxComboBox").jqxComboBox("close" ); 

Checks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to check the first item, the 'checkIndex' method should be called with parameter 0.

Code example

Invoke the checkIndex method. The example code below, checks the first list item.

$("#jqxComboBox").jqxComboBox('checkIndex', 0); 

Checks an item.

Code example

Invoke the ccheckItemeckItem method.

// @param list Item

$("#jqxComboBox").jqxComboBox('checkItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Checks all list items when the 'checkboxes' property value is true.

Code example

Invoke the checkAll method.

$("#jqxComboBox").jqxComboBox('checkAll'); 

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxComboBox').jqxComboBox('destroy'); 

Disables an item. Item is an Object.

The following fields can be used for the item:

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

Code example

Invoke the disableItem method.

// @param Number

$("#jqxComboBox").jqxComboBox('disableItem', "jQuery" ); 

Disables an item by index. Index is a number.

Code example

Invoke the disableAt method.

// @param Number

$("#jqxComboBox").jqxComboBox('disableAt', 8 ); 

Enables an item. Item is an Object.

The following fields can be used for the item:

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

Code example

Invoke the enableItem method.

// @param Number

$("#jqxComboBox").jqxComboBox('enableItem', "jQuery" ); 

Enables a disabled item by index. Index is a number.

Code example

Invoke the enableAt method.

// @param Number

$("#jqxComboBox").jqxComboBox('enableAt', 3 ); 

Ensures that an item is visible. index is number. When necessary, the jqxComboBox scrolls to the item to make it visible.

Code example

Invoke the ensureVisible method.

// @param Number

$("#jqxComboBox").jqxComboBox('ensureVisible', 2 ); 

Sets the focus to the widget.

Code example

Invoke the focus method.

$("#jqxComboBox").jqxComboBox('focus');

Gets item by index. The returned value is an Object with the following fields:

Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code example

Invoke the getItem method.

// @param Number

var item = $("#jqxComboBox").jqxComboBox('getItem', 1 ); 

Gets an item by its value. The returned value is an Object with the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code example

Invoke the getItemByValue method.

// @param Value

var item = $("#jqxComboBox").jqxComboBox('getItemByValue', "Bon app'");

Gets all items displayed in the ComboBox. The method could be useful for getting the currently visible items after auto complete. The returned value is an array of Items.

Each item represents an Object with the following fields.
Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code example

Invoke the getVisibleItems method.

var items = $("#jqxComboBox").jqxComboBox('getVisibleItems'); 

Get the first item.

var items = $("#jqxComboBox").jqxComboBox('getVisibleItems'); var firstItem = items[0];

Gets all items. The returned value is an array of Items.

Each item represents an Object with the following fields.
Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code example

Invoke the getItems method.

var items = $("#jqxComboBox").jqxComboBox('getItems'); 

Get the first item.

var items = $("#jqxComboBox").jqxComboBox('getItems'); var firstItem = items[0];

Gets the checked items. The returned value is an array of Items.

Each item represents an Object with the following fields.
Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code example

Invoke the getCheckedItems method.

var items = $("#jqxComboBox").jqxComboBox('getCheckedItems'); 

Gets the selected item. The returned value is an Object or null(if there is no selected item).

Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code example

Invoke the getSelectedItem method.

// @param Number

var item = $("#jqxComboBox").jqxComboBox('getSelectedItem'); 

Gets the selected items when "multiselect" is turned on. The returned value is an Array with Objects.

Each object has the following fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code example

Invoke the getSelectedItems method.

var items = $("#jqxComboBox").jqxComboBox('getSelectedItems'); 

Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.

Code example

Invoke the getSelectedIndex method.

// @param Number

var index = $("#jqxComboBox").jqxComboBox('getSelectedIndex'); 

Inserts a new item to the jqxComboBox. Returns 'true', if the new item is inserted or false if the insertaion fails. The first parameter is Object or String - the new item. The second parameter is Number - the item's index.

The following fields can be used for the new item:

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

Code example

Invoke the insertAt method.

// @param String

// @param Number

$("#jqxComboBox").jqxComboBox('insertAt', 'jQuery', 1 ); 

Code example 2

Invoke the insertAt method.

// @param Object

// @param Number

$("#jqxComboBox").jqxComboBox('insertAt', '{ label: 'Text' value: 'Id'}, 1 ); 

Returns true, if the popup is opened. Otherwise returns false.

Code example

Invoke the isOpened method.

var opened = $("#jqxComboBox").jqxComboBox('isOpened' ); 

Indeterminates a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to indeterminate the first item, the 'indeterminateIndex' method should be called with parameter 0.

Code example

Invoke the indeterminateIndex method. The example code below, indeterminates the first list item.

$("#jqxComboBox").jqxComboBox('indeterminateIndex', 0); 

Indeterminates an item.

Code example

Invoke the indeterminateItem method.

// @param list Item

$("#jqxComboBox").jqxComboBox('indeterminateItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Loads list items from a 'select' tag.

Code example

Invoke the loadFromSelect method.

$("#jqxComboBox").jqxComboBox('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>

Shows the popup listbox.

Code example

Invoke the open method.

$("#jqxComboBox").jqxComboBox('open' ); 

Removes an item from the listbox. Parameter type: Object returned by the "getItem" method or String - the value of an item. Returns 'true', if the item is removed or 'false', if the item is not removed.

Code example

Invoke the removeItem method.

// @param Object

$("#jqxComboBox").jqxComboBox('removeItem', "List Item" ); 

Removes an item from the listbox. Parameter type: Number - the index of the item. The method returns 'true', if the item is removed or 'false', if the item is not removed.

Code example

Invoke the removeAt method.

// @param Number

$("#jqxComboBox").jqxComboBox('removeAt', 3 ); 

Selects an item by index. The index is zero-based, i.e to select the first item, the 'selectIndex' method should be called with parameter 0.

Code example

Invoke the selectIndex method.

// @param Number

$("#jqxComboBox").jqxComboBox('selectIndex', 0 ); 

Selects an item.

Code example

Invoke the selectItem method.

// @param List Item

$("#jqxComboBox").jqxComboBox('selectItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Updates an item. The first parameter is the new item. The second parameter could be an existing item or the value of an existing item.

The following fields can be used for the item:

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

Code example

Invoke the updateItem method.

// @param Object

// @param Object

$("#jqxComboBox").jqxComboBox('updateItem', { label: "Text", value: "Id1" }, "Antonio Moreno Taquera");

Updates an item. The first parameter is the new item. The second parameter is the index of the item to be updated.

The following fields can be used for the item:

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

Code example

Invoke the updateAt method.

// @param Number

$("#jqxComboBox").jqxComboBox('updateAt', { label: "Text", value: "Id1" }, 3 );

Unselects item by index. The index is zero-based, i.e to unselect the first item, the 'unselectIndex' method should be called with parameter 0.

Code example

Invoke the unselectIndex method.

// @param Number

$("#jqxComboBox").jqxComboBox('unselectIndex', 5 ); 

Unselects an item.

Code example

Invoke the unselectItem method.

// @param List Item

$("#jqxComboBox").jqxComboBox('unselectItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Unchecks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to uncheck the first item, the 'uncheckIndex' method should be called with parameter 0.

Code example

Invoke the uncheckIndex method. The example code below, unchecks the first list item.

$("#jqxComboBox").jqxComboBox('uncheckIndex', 0); 

Unchecks an item.

Code example

Invoke the uncheckItem method.

// @param list Item

$("#jqxComboBox").jqxComboBox('uncheckItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Unchecks all list items when the 'checkboxes' property value is true.

Code example

Invoke the uncheckAll method.

$("#jqxComboBox").jqxComboBox('uncheckAll'); 

Sets or gets the selected value.

Code example

Invoke the val method.

// Get the value.

var value = $("#jqxComboBox").jqxComboBox('val');

// Get the value using jQuery's val()

var value = $("#jqxComboBox").val();

// Set value.

$("#jqxComboBox").jqxComboBox('val', 'New Value');

// Set value using jQuery's val().

$("#jqxComboBox").val('New Value');