The ComboBox can be initialized on three different tags as described in below. Though it is initialized in different tags, the UI appearance and built-in features behave in the same way.
When a ComboBox is initialized on SELECT element, the list items can be assigned through the option tag of the HTML select element.
<optgroup> tag that is available
within the <select> element, by default.selected attribute to an option tag.// initialize ComboBox component
let comboBoxObject = new ej.dropdowns.ComboBox({
placeholder: "Select a vegetable",
popupHeight: "200px"
});
// render initialized ComboBox
comboBoxObject.appendTo('#selectElement');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 ComboBox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="margin:50px auto 0; width:250px;">
<br>
<select id="selectElement">
<optgroup label="Beans">
<option value="1">Chickpea</option>
<option value="2">Green bean</option>
<option value="3" selected="selected">Horse gram</option>
</optgroup>
<optgroup label="Leafy and Salad">
<option value="5">Cabbage</option>
<option value="4">Spinach</option>
<option value="6">Wheat grass</option>
<option value="7">Yarrow</option>
</optgroup>
</select>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>The ComboBox can be initialized through <UL> element which contains a collection of <LI> element.
The <LI> items act as a popup list items of the ComboBox. The inner text of the <LI> element
is considered both as text and value fields.
//initiates the component
let comboBoxObject = new ej.dropdowns.ComboBox({
placeholder: "Select a vegetable"
});
// render initialized ComboBox
comboBoxObject.appendTo('#ulElement');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 ComboBox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="margin:50px auto 0; width:250px;">
<br>
<ul id="ulElement">
<li>Badminton</li>
<li>Cricket</li>
<li>Football</li>
<li>Golf</li>
</ul>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>The ComboBox has also be rendered through <input> element with an array of either simple or
complex data that is set through the dataSource property.
It can retrieve data from local data sources as well as remote data services.
Detailed information about the data binding with an example is available in: Data Binding to ComboBox