jQuery ListBox

Set the displayMember property 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 id="log"></div>

JavaScript

var source = [{
     text: "Affogato",
     value: 0
 }, {
     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
 }, {
     text: "Caffé macchiato",
     value: 9
 }, {
     text: "Café mélange",
     value: 10
 }, {
     text: "Coffee milk",
     value: 11
 }, {
     text: "Cafe mocha",
     value: 12
 }];
 // Create a jqxListBox
 $("#jqxListBox").jqxListBox({
     source: source,
     theme: 'energyblue',
     width: '200px',
     height: '250px',
     displayMember: 'text',
     selectedIndex: 0,
     valueMember: 'value'
 });
 $("#jqxListBox").on('change', function (event) {
     $("#log").html("label: " + event.args.item.label + ", value: " + event.args.item.value);
 });