select item by js

[alonekjco]

Hi

I have a dropdown list. Its dataSource is configured. 

I want one of the values of this dropdown to be selected when a button is clicked.

I want this to be based on text or value, not index

[Berly Christopher]

Hi Alonekjco, 

  

Greetings from Syncfusion support. 

  

We can set the pre-defined value with help of component instance as mentioned in the below code example. 

  

<div class="control-wrapper"> 

    <div id="default" style='padding-top:75px;margin:0 auto;width:250px;'> 

        <ejs-dropdownlist id="vegetable" dataSource="@ViewBag.data" placeholder="Select a vegetable" popupHeight="220px"> 

            <e-dropdownlist-fields value="Vegetable"></e-dropdownlist-fields> 

        </ejs-dropdownlist> 

    </div> 

    <button id="button">Click to select the value</button> 

</div> 

<script> 

    document.getElementById("button").addEventListener("click", (e) => { 

        var dropObj = document.getElementById("vegetable"); 

        dropObj.ej2_instances[0].value = "Garlic"; 

    }); 

</script> 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL_value2063540119  

  

Regards, 

Berly B.C