Blogs

To synchronize the jqxListBox widget with a ‘Select’ tag, you need to do the following: Initialize the jqxListBox and load its items from the ‘Select’ tag. To achieve this, we will use the ‘loadFromSelect’ method and will pass as parameter the ‘Select’ tag’s ID.

// Create a jqxListBox
$("#jqxListBox").jqxListBox({ width: 200, height: 250, theme: theme });
// Load the data from the Select html element.
$("#jqxListBox").jqxListBox('loadFromSelect', 'Select');

To keep the selection in sync, we bind to the jqxListBox’s ‘select’ event and then select the ‘Select’ tag’s item depending on the selected index.

$("#jqxListBox").bind('select', function (event) {
        if (event.args) {
             var args = event.args;
             // select the item in the 'select' tag.
             var index = args.item.index;
             $("#select").find('option').eq(index).attr("selected", "true");
        }
 });

Now, let’s see how to set the ListBox’s selected item when the user changes the selection in the ‘Select’ tag. Bind to the ‘change’ event of the ‘Select’ tag and call the ListBox’s selectIndex and ensureVisible methods. The selectIndex method selects an item at specific index. The ensureVisible method scrolls the ListBox to a specific list item.

$("#select").bind('change', function (event) {
   var index = $("#select")[0].selectedIndex;
   $("#jqxListBox").jqxListBox('selectIndex', index);
   $("#jqxListBox").jqxListBox('ensureVisible', index);
});