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.
Up arrow icon