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

Dropdownlist - Dynamic creation

Hi support,

I'm trying to create a control dynamically with JS (ex: a dropdownlist), but i don't know how to do it.
Example:
When the user click on a button, i would create a dropdownlist automatically (or create 2, 3, 4 dropdownlist)

Regards

3 Replies

PO Prince Oliver Syncfusion Team January 17, 2019 10:41 AM UTC

Hi Daniel, 

Thank you for using Syncfusion products. 

To create a DropDownList control dynamically with JS, kindly refer to the following code snippet. 

<script type="text/javascript"> 
    // Incremental variable to set unique ID attribute 
    var count = 0; 
    // Click handler 
    function onClick() { 
        // Incrementing the value upon every click 
        count++; 
        // Dynamically creating an input element 
        var inputEle = document.createElement('input'); 
        // Setting ID attibute to the dynamic inputs 
        inputEle.setAttribute('id', 'dropdown' + count); 
        // Appending the created element to the DOM 
        document.getElementById('renderdropdown').appendChild(inputEle); 
        // Datasource for the DropDownList 
        var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis']; 
        // Rendering the DropDownList 
        var listObj = new ej.dropdowns.DropDownList({ 
            dataSource: sportsData, 
            placeholder: "Select games" 
        }); 
        listObj.appendTo(inputEle); 
    } 
</script> 

We have attached a sample for your reference, please find the sample at the following location:  

Please let us know if you need any further assistance on this. 

Regards, 
Prince 



DD Daniel Duvoisin January 17, 2019 09:20 PM UTC

Hi Prince,

Thank you, it works great!

Regards


PO Prince Oliver Syncfusion Team January 18, 2019 05:07 AM UTC

Hi Daniel, 

Most welcome. We are glad to help you. Please let us know if you need any further assistance on this. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon