Html DropDownList

Invoke the loadFromSelect method of the jqxDropDownList. 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='jqxDropDownList'></div>
<div>
    <input style="margin-top: 20px;" type="button" id='jqxButton' value="Load..." />
</div>
<br/>
<select style='height: 25px; width: 200px;' id='select'>
    <option>Affogato</option>
    <option>Americano</option>
    <option>Bicerin</option>
    <option>Breve</option>
    <option>Café Bombón</option>
    <option>Caffé Corretto</option>
    <option>Café Crema</option>
    <option>Caffé Latte</option>
    <option>Caffé macchiato</option>
    <option>Café mélange</option>
    <option>Coffee milk</option>
    <option>Cafe mocha</option>
    <option>Cappuccino</option>
    <option>Carajillo</option>
    <option>Cuban espresso</option>
    <option>Espresso</option>
    <option>The Flat White</option>
    <option>Frappuccino</option>
    <option>Galao</option>
    <option>Greek frappé coffee</option>
    <option>Iced Coffee</option>
    <option>Indian filter coffee</option>
    <option>Instant coffee</option>
    <option>Irish coffee</option>
    <option>Liqueur coffee</option>
</select>

JavaScript

// Create a jqxDropDownList
    $("#jqxDropDownList").jqxDropDownList({
        theme: 'energyblue',
        width: '200px',
        height: '25px',
        selectedIndex: 2
    });
    var updating = false;

    $("#jqxButton").jqxButton({
        theme: 'energyblue'
    });
    $("#jqxButton").click(function () {
        $("#jqxDropDownList").jqxDropDownList('loadFromSelect', 'select');
    });
    // updates the select's selection.
    $("#jqxDropDownList").on('select', function (event) {
        if (event.args && !updating) {
            var args = event.args;
            // select the item in the 'select' tag.
            var index = args.item.index;
            $("#select").val(args.item.value);
        }
    });
    // updates the selection.
    $("#select").on('change', function (event) {
        updating = true;
        var index = $("#select")[0].selectedIndex;
        $("#jqxDropDownList").jqxDropDownList('selectIndex', index);
        $("#jqxDropDownList").jqxDropDownList('ensureVisible', index);
        updating = false;
    });