How to create an example of Javascript MultiSelect Dropdown?
This article provides a step-by-step introduction to configure Syncfusion JavaScript (ES5) MultiSelect control (Essential JS 2) in the bootstrap theme and build a simple HTML web application.
Pre-requisites
MultiSelect Component Initialization
Create an app folder myapp in your local machine to initialize the Essential JS 2 JavaScript components.
Use either of the following ways to refer to the required script and styles.
- Using local script and style references in an HTML page.
- Using the CDN link for script and style reference.
Using local script and style references in an HTML page
Step 1: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.
Step 2: To render the MultiSelect component, you need to add the MultiSelect and its dependent packages from the following installed location.
Dependencies
- ej2-base
- ej2-data
- ej2-navigations
- ej2-inputs
- ej2-buttons
- ej2-popups
- ej2-lists
- ej2-dropdowns
Syntax:
package: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}
Example:
Package: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-base Package: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-data packages: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-inputs packages: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-buttons packages: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-popups packages: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-lists packages: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-navigations Package: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-dropdowns
Step 3: Create a folder myapp/resources and copy/paste the global scripts and styles from the above installed location to the myapp/resources location.
Step 4: Create a HTML page (index.html) in the myapp location and add the Essentials JS 2 script and style references.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Essential JS 2</title> <!-- Essential JS 2 material theme --> <link href="resources/base/styles/bootstrap.css" rel="stylesheet" type="text/css"/> <link href="resources/inputs/styles/bootstrap.css" rel="stylesheet" type="text/css"/> <link href="resources/lists/styles/bootstrap.css" rel="stylesheet" type="text/css"/> <link href="resources/popups/styles/bootstrap.css" rel="stylesheet" type="text/css"/> <link href="resources/buttons/styles/bootstrap.css" rel="stylesheet" type="text/css"/> <link href="resources/dropdowns/styles/bootstrap.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 MultiSelect's dependent scripts --> <script src="resources/ej2-base.min.js" type="text/javascript"></script> <script src="resources/ej2-data.min.js" type="text/javascript"></script> <script src="resources/ej2-inputs.min.js" type="text/javascript"></script> <script src="resources/ej2-lists.min.js" type="text/javascript"></script> <script src="resources/ej2-popups.min.js" type="text/javascript"></script> <script src="resources/ej2-buttons.min.js" type="text/javascript"></script> <!-- Essential JS 2 MultiSelect's global script --> <script src="resources/ej2-dropdowns.min.js" type="text/javascript"></script> </head> <body> </body> </html>
Step 5: Now, add the input element and initiate the Essential JS 2 MultiSelect component in the index.html by using the following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2</title>
<!-- Essential JS 2 bootstrap theme -->
<link href="resources/base/styles/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="resources/inputs/styles/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="resources/lists/styles/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="resources/popups/styles/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="resources/buttons/styles/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="resources/dropdowns/styles/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="resources/ej2-base.min.js" type="text/javascript"></script>
<script src="resources/ej2-data.min.js" type="text/javascript"></script>
<script src="resources/ej2-inputs.min.js" type="text/javascript"></script>
<script src="resources/ej2-lists.min.js" type="text/javascript"></script>
<script src="resources/ej2-popups.min.js" type="text/javascript"></script>
<script src="resources/ej2-buttons.min.js" type="text/javascript"></script>
<!-- Essential JS 2 MultiSelect's global script -->
<script src="resources/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input type="text" id='multiselect' />
<script>
// initialize the MultiSelect component
var multiSelect = new ej.dropdowns.MultiSelect();
// Render the initialized MultiSelect.
multiSelect.appendTo('#multiselect');
</script>
</body>
</html>
Step 6: Now, run the index.html in the web browser. It will render the Essential JS 2 MultiSelect component in the bootstrap theme.
Using the CDN link for script and style reference
Step 1: The Essential JS 2 components scripts and styles are already hosted in the following CDN link formats.
Syntax:
Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Style: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/bootstrap.css
Example:
Script: http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js Styles: http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/bootstrap.css
Step 2: You should add the CDN global script and style for the MultiSelect and its dependent packages in the myapp/index.html as like the following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2</title>
<!-- Essential JS 2 MultiSelect's dependent bootstrap theme -->
<link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<script>
var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
// initialize the MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData});
listObj.appendTo('#select');
</script>
</body>
</html>
Else, you can render the MultiSelect component by using the CDN link with all the components instead of the MultiSelect controls dependent package CDN link as mentioned below.
<!-- Syncfusion Essential JS 2 Styles --> <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/bootstrap.css" /> <!-- Syncfusion Essential JS 2 Scripts --> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
Screenshot
Also, you can download and run the sample from this link. Refer to our documentation and online samples for more features.
If you have any queries, please let us know in the comments section below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
Conclusion
I hope you enjoyed learning how to create an example of Javascript MultiSelect Dropdown.
You can refer to our JavaScript MultiSelect Dropdown feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Multiselect Dropdown example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
