Tags in EJ2 JavaScript MultiSelect Dropdown

4 Sep 20266 minutes to read

The MultiSelect can be initialized on three different tags, as described below. Although it is initialized using different tags, the UI appearance and built-in features behave in the same way.

Select element

When the MultiSelect is initialized on a <select> element, the list items can be assigned through the <option> tags of the HTML <select> element.

  • The nested items are wrapped and grouped based on the <optgroup> tag that is available
    within the <select> element by default.
  • You can preselect an option by setting the selected attribute on an <option> tag.
// initialize MultiSelect component
    var listObj = new ej.dropdowns.MultiSelect({
        // set placeholder to MultiSelect input element
        placeholder: "Select games"});
    listObj.appendTo('#selectElement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 MultiSelect</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="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <select id="selectElement">
            <optgroup label="Beans">
                <option value="1">Chickpea</option>
                <option value="2">Green bean</option>
                <option value="3">Horse gram</option>
            </optgroup>
            <optgroup label="Leafy and Salad">
                <option value="4" selected="selected">Cabbage</option>
                <option value="5">Spinach</option>
                <option value="6">Wheat grass</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>

UL element

The MultiSelect can be initialized through a <ul> element that contains a collection of <li> elements. The <li> items act as popup list items of the MultiSelect. The inner text of the <li> element is considered as both the text and value fields.

// initialize MultiSelect component
    var listObj = new ej.dropdowns.MultiSelect({
        // set placeholder to MultiSelect input element
        placeholder: "Select games"});
    listObj.appendTo('#ulElement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 MultiSelect</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="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <ul id="ulElement">
            <li>Cabbage</li>
            <li>Spinach</li>
            <li>Wheat grass</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>

Input element

The MultiSelect can also be rendered through an <input> element with an array of either simple or complex data set via the dataSource property. It can retrieve data from local data sources as well as remote data services.

Detailed information about data binding with an example is available at: Data Binding to MultiSelect