jQuery ListBox

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

by Sumesh TG

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="Select Caffé Latte" />
</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:2,
       multipleextended: true,
       allowDrag:true
   });
   var selectedUsersItems=new Array();
 $('#jqxListBox').on('change', function (event) {
  
   });
   $('#jqxListBox').on('select', function (event) {
    if (event.args && event.args.originalEvent && event.args.originalEvent.ctrlKey != undefined && event.args.originalEvent.ctrlKey) {
        selectedUsersItems = new Array();
        var items =    $('#jqxListBox').jqxListBox('getSelectedItems');
        $.each(items, function (i, listItem) {
          selectedUsersItems.push(listItem);
        });
      }
   });
   $('#jqxListBox').on('dragStart', function (event) {
       $.each(selectedUsersItems, function (index, item) {
        if (item.value != event.args.value) {
           $('#jqxListBox').jqxListBox('selectItem', item, false);
        }
      });
   });
   $("#jqxButton").jqxButton({
       theme: 'energyblue'
   });
   $('#jqxButton').on('click', function () {
      $("#jqxListBox").jqxListBox('selectItem','Caffé Latte');
  });