Populating ListBox from UL

In this post we will show you how to populate the jqxListBox with data coming from UL in a few steps.

1. Include the javascript and stylesheet files. 

<head>
    <title>jQuery ListBox</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
</head>
2. Add the HTML markup for the ListBox. We will pass the ‘ListBox’ id to the jqxListBox constructor. You can see that we added UL element inside the DIV container. 

<div id='ListBox'>
    <ul>
        <li>Affogato</li>
        <li>Americano</li>
        <li>Bicerin</li>
        <li>Breve</li>
        <li>Café Bombón</li>
        <li>Café au lait</li>
        <li>Caffé Corretto</li>
        <li>Café Crema</li>
        <li>Caffé Latte</li>
        <li>Caffé macchiato</li>
        <li>Café mélange</li>
        <li>Coffee milk</li>
        <li>Cafe mocha</li>
        <li>Cappuccino</li>
        <li>Carajillo</li>
        <li>Cortado</li>
        <li>Cuban espresso</li>
        <li>Espresso</li>
        <li>Eiskaffee</li>
        <li>The Flat White</li>
        <li>Frappuccino</li>
        <li>Galao</li>
        <li>Greek frappé coffee</li>
        <li>Iced Coffee</li>
        <li>Indian filter coffee</li>
        <li>Instant coffee</li>
        <li>Irish coffee</li>
        <li>Liqueur coffee</li>
    </ul>
</div>
3. Now, we will loop through the list items and build our source array. After that, we will hide the UL list. 

   var source = [];
   $("#ListBox li").each(function (index) {
      source[index] = $(this).text();
   });
   $("#ListBox").find('ul').css('display', 'none');
4. Finally, we create the ListBox and set the source property to point to the source array. 

$("#ListBox").jqxListBox({ source: source, width: '200', height: '250px'});
The resulting ListBox is shown below:
jquery listbox plugin

About admin


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



Leave a Reply