jQuery ListBox

Set the displayMember property of the jqxListBox. Author: http://jqwidgets.com

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>
<button id="filter">Filter - Checked Items</button>
<br><br>
<div id='jqxListBox'></div>
<div id="log"></div>

JavaScript

var source = [{
  text: "Affogato",
  value: 0,
  checked: true
}, {
  text: "Americano",
  value: 1
}, {
  text: "Bicerin",
  value: 2
}, {
  text: "Breve",
  value: 3
}, {
  text: "Café Bombón",
  value: 4
}, {
  text: "Café au lait",
  value: 5
}, {
  text: "Caffé Corretto",
  value: 6
}, {
  text: "Café Crema",
  value: 7
}, {
  text: "Caffé Latte",
  value: 8,
  checked: true
}, {
  text: "Caffé macchiato",
  value: 9,
  checked: true
}, {
  text: "Café mélange",
  value: 10,
  checked: true
}, {
  text: "Coffee milk",
  value: 11
}, {
  text: "Cafe mocha",
  value: 12,
  checked: true
}];

// Create a jqxListBox
$("#jqxListBox").jqxListBox({
  source: source,
  theme: 'energyblue',
  width: '200px',
  height: '250px',
  displayMember: 'text',
  selectedIndex: 0,
  valueMember: 'value',
  checkboxes: true
});

$("#filter").jqxButton({ theme: 'energyblue' })
  .click(_ => {  
  	let newArray = [];
    for (let item of source) {
    	if (item.checked) {
      	newArray.push(item);
      }
    }
    
    $("#jqxListBox").jqxListBox({ source: newArray });  
    
    // Another approach - with "getCheckedItems" method
    // var items = $("#jqxListBox").jqxListBox('getCheckedItems'); 
  });

$("#jqxListBox").on('change', function (event) {
  $("#log").html("label: " + event.args.item.label + ", value: " + event.args.item.value);
});