jQuery ListBox

Invoke the selectIndex method of the jqxListBox. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxListBox'></div>
<div>
    <input style="margin-top: 20px;" type="button" id='jqxButton' value="Change the selected index" />
</div>

JavaScript

var source = [
    "Affogato",
    "Americano",
    "Bicerin",
    "Breve",
    "Café Bombón",
    "Café au lait",
    "Caffé Corretto",
    "Café Crema",
	 "Caffé Latte"];

// Create a jqxListBox
$("#jqxListBox").jqxListBox({
    source: source,
    theme: 'energyblue',
    width: '200px',
    height: '250px',
    selectedIndex: 0,
    multiple: true
});
$("#jqxButton").jqxButton({
    theme: 'energyblue'
});
$('#jqxButton').on('click', function () {
	  var index = $("#jqxListBox").jqxListBox('getSelectedIndex'); 
 	 	$("#jqxListBox").jqxListBox('unselectIndex', index);
   	$("#jqxListBox").jqxListBox('selectIndex', 2);
   	$("#jqxListBox").jqxListBox('selectIndex', 3);
});