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>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> </select>
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');















