ComboBox Markup and Scripting

The wijcombobox widget can be created in HTML markup with <input> or <select> elements.

Input element

The following markup and jQuery script is an example of how to create the wijcombobox widget with an HTML input element.

Markup	Copy Code
<input id="combobox" />

You can initialize the widget with the following jQuery script.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijcombobox"], function () { $(document).ready(function () { $("#combobox").wijcombobox({ data: [{ label: 'c++', value: 'c++' }, { label: 'java', value: 'java' }, { label: 'php', value: 'php' }, { label: 'coldfusion', value: 'coldfusion' }] }); }); }); </script>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcombobox"], function () {
        $(document).ready(function () {
            $("#combobox").wijcombobox({
                data: [{
                    label: 'c++',
                    value: 'c++'
                }, {
                    label: 'java',
                    value: 'java'
                }, {
                    label: 'php',
                    value: 'php'
                }, {
                    label: 'coldfusion',
                    value: 'coldfusion'
                }]
            });
        });
    });
</script>

The markup and script featured here results in the following live widget. Drop down the combobox to see the options.

Select element

The following markup and jQuery script is an example of how to create the wijcombobox widget with an HTML select element.

Markup	Copy Code
<select id="combobox"> <option value="c++">c++</option> <option value="java">java</option> <option value="php">php</option> <option value="coldfusion">coldfusion</option> </select>

You can initialize the widget with the following jQuery script.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijcombobox"], function () { $(document).ready(function () { $("#combobox").wijcombobox({}); }); }); </script>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcombobox"], function () {
        $(document).ready(function () {
            $("#combobox").wijcombobox({});
        });
    });
</script>

The markup and script featured here results in the following live widget. Drop down the combobox to see the options.

Reference

wijcombobox API

data Option