Available in the OSS Version

Combo Box - HTML Binding

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The igCombo can bind directly to an HTML SELECT element.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <!-- The igCombo can bind to the a SELECT element and use
    the HTML OPTION elements as combo's dataSource. Furthermore,
    The OPTION element's value attribute is used for the widget's
    valueKey -->
    <select id="combo">
        <option value="1">John Smith</option>
        <option value="2">Mary Johnson</option>
        <option value="3">Bob Ferguson</option>
    </select>

    <script>
        $(function () {
            
            //The igCombo is bound to the SELECT and OPTION elements
            //defined above
            $("#combo").igCombo();
        });
    </script>

</body>
</html>