Create a ListBox From Unordered List

In this post, we will use the jqxListBox widget and will load its items from unordered list. Let’s create a simple DIV tag with Unordered List inside.

<div id='ListBox'>
	<ul>
		<li>About Us</li>
		<li>Press</li>
		<li>Investor Relations</li>
		<li>Corporate Affairs</li>
		<li>Careers</li>
		<li>Showcase</li>
		<li>Events</li>
		<li>Contact Us</li>
		<li>Become an affiliate</li>
	</ul>
</div>


The next step is to add the references to the jQuery framework(jquery-1.7.1.min.js), jQWidgets framework(jqxcore.js), ListBox(jqxlistbox.js), Button(jqxbuttons.js) and ScrollBar(jqxscrollbar.js). References to the Button and ScrollBar widgets are required because the ListBox internally uses these widgets for scrolling. We also add references to the external style sheets(jqx.base.css and jqx.darkblue.css) that control the visual appearance of the ListBox widget.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.darkblue.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>

To populate the ListBox widget with list items, we need to loop through the Unordered list and build the ListBox data source.

In the code example below, we select the ListBox tag and loop through all LI tags. The text of each tag is saved into the data array.

var data = new Array();
$("#ListBox").find('li').each(function () {
    data[data.length] = $(this).text();
});
$("#ListBox").find('ul').css('display', 'none');


Finally, we select the ListBox tag and call the jqxListBox constructor to create the ListBox. The initialization includes setting the source, width, height and theme properties. The source property is set to point to the data array.

$("#ListBox").jqxListBox({ source: data, width: 200, height: 250, theme: 'darkblue' });


jquery listbox load from unordered list

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