Blogs

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