Populate jqxListBox with items from html select element

In this post we will show you how to add jqxListBox to your page and populate it with from a Select element. To display a jqxListBox on a page, you need to add a DIV element to the HTML markup and set its id:
<div id='jqxListBox'></div>
After that, initialize the listbox with the script below:
$("#jqxListBox").jqxListBox({ width: '200px', height: '250px'}); 
Now, you are ready to populate the listbox with items from a Select element. Here’s a simple Select element.
<select style='height: 250px; width: 200px; ' size='2' id='select'>
     <option>Café Bombón</option>
     <option>Caffé Corretto</option>
     <option>Café Crema</option>
     <option>Caffé Latte</option>              
jqxListBox has a function named ‘loadFromSelect’. This function allows you to load the data from a Select element and display it into the listbox. You just need to pass the ‘id’ of the Select element as parameter to the ‘loadFromSelect’ function and that’s all.
$("#jqxListBox").jqxListBox('loadFromSelect', 'select');

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxListBox and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply