Html5 ComboBox

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

by Manu Vashishtha

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='jqxComboBox'></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 jqxComboBox
 $("#jqxComboBox").jqxComboBox({
     source: source,
     theme: 'energyblue',
     width: '200px',
     height: '25px',
     displayMember: 'text',
     selectedIndex: 0,
     valueMember: 'value'
 });
 $("#jqxComboBox").on('change', function (event) {
  alert($("#jqxComboBox").jqxComboBox("val"));
     $("#log").html("label: " + event.args.item.label + ", value: " + event.args.item.value);
 });