We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to clear multi drop down list when i click on button click?


How to clear Multi Drop Down list on button click (Ex: Reset Button).

Thanks and Regards,

5 Replies

HP Harikrishnan P Syncfusion Team March 10, 2015 10:19 AM UTC

Hi Chaitanya,

Thanks for using Syncfusion products.

Query: How to clear Multi Drop Down list on button click (Ex: Reset Button).

We can use the public method “clearText()” to clear the values in Dropdownlist. To access this public method we need to use the object of dropdownlist. Please refer the below code,

        function clearValue(e) {

            //Object for Dropdownlist is created

            var target = $('#skillsets').data("ejDropDownList");

            //clearText method is called to clear the values in Dropdownlist



You can refer the following common user guide for JavaScript to know more about getting started with our components. Under each components we have provided “Concepts and features” section which explains about the features of the particular component.


You can also refer the following class reference link for JavaScript, which showcases all the properties, methods and events supported by each component.


Please let us know if you have further queries.



AD adjie August 26, 2019 09:01 AM UTC

Hi Im using your library Angular Syncfusion, i've same case when make a reset button on multiselect is there any guide to use clear all selected function to button. i think thats my question, thanks btw

AB Ashokkumar Balasubramanian Syncfusion Team August 28, 2019 09:39 AM UTC

Hi Adjie,  
Good day to you. 
We have prepared a sample in Angular for clearing selected items in DropDownList using clearText() method through button click.  Please refer to the following code 
<input id="dropdown1" #drop ej-dropdownlist [dataSource]="data" [fields]="fields" [showCheckbox]="true" /> 
<br /> 
<button (click)="onClick($event)" type="button">Reset</button> 
export class AppComponent { 
                @ViewChild("drop") ddlObj:EJComponents<ej.DropDownList, any>; 
                data: Array<Object> = []; 
                fields: Object; 
                constructor() { 
                this.data = [ 
                    {text: "ListItem 1", value: "ListItem 1" }, 
                    {text: "ListItem 2", value: "ListItem 2" }, 
                    {text: "ListItem 3", value: "ListItem 3" }, 
                    {text: "ListItem 4", value: "ListItem 4" }, 
                    {text: "ListItem 5", value: "ListItem 5" }, 
              this.fields = { dataSource: this.data, text: "text", value: "value" }; 
Please check the sample and get back to us, if you need any further assistance on this. 
Ashokkumar B. 

AG Ajay Gohil September 28, 2019 11:32 AM UTC

Set on button click event 
$("#skillsets").prop('selectedIndex', -1);

AB Ashokkumar Balasubramanian Syncfusion Team September 30, 2019 10:05 AM UTC

Hi Adjie, 
We suggested a direct method (cleartext) for clearing selected values in Drop Down List component. If you need to achieve this through property, then you can set empty value via Drop Down List instance as shown below 
        this.ddlObj.widget.option("value", ""); 
Could you please check code block and let us know, if you require any further assistance on this? 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon