Html ListBox

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

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxListBox'></div>
<div>
    <input style="margin-top: 20px;" type="button" id='jqxButton' value="Show the selected items" />
</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',
      multiple: true
  });
  $("#jqxListBox").jqxListBox('selectItem', 'Breve');

  $("#jqxButton").jqxButton({
      theme: 'energyblue'
  });
  $('#jqxButton').on('click', function () {
      // get selected items.
      var items = $("#jqxListBox").jqxListBox('getSelectedItems');
      if (items.length > 0) {
          var labels = "";
          for (var i = 0; i < items.length; i++) {
              labels += items[i].label;
              if (i < items.length - 1) labels += ", ";
          }
          alert(labels);
      }
  });