Tags in EJ2 TypeScript Multi select control

2 May 20236 minutes to read

The MultiSelect 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.

Select element

When a MultiSelect is initialized on SELECT element, the list items can be assigned through the option tag 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 the option by setting the selected attribute to an option tag.
import { MultiSelect } from '@syncfusion/ej2-dropdowns';

    // initialize MultiSelect component
    let msObject: MultiSelect = new MultiSelect({
        placeholder:"Select vegetables"
    });

    // render initialized MultiSelect
    msObject.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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <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>

</body>

</html>

UL element

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

import { MultiSelect } from '@syncfusion/ej2-dropdowns';

    // initialize MultiSelect component
    let msObject: MultiSelect = new MultiSelect({
        placeholder:"Select vegetables"
    });

    // render initialized MultiSelect
    msObject.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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="margin:0 auto; width:250px;">
        <ul id='ulElement'>
            <li>Cabbage</li>
            <li>Spinach</li>
            <li>Wheat grass</li>
        </ul>
    </div>
</body>
</html>

Input element

The MultiSelect 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 MultiSelect