Html5 ComboBox

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

by txhi

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: "",
    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',
    renderSelectedItem: function(index, item)
    {
        if (item.label.length == 0) {
            return "";
        }
        
        return item.label;
    }
});
$("#jqxComboBox").on('change', function (event) {
    $("#log").html("label: " + event.args.item.label + ", value: " + event.args.item.value);
});