how to change DropDownListItem text in javascript

[tomer]

hi,

how do I change the DropDownListItem's text with Javascript?

for example, I wrote this:

<ej:DropDownList ID="DropDownList1">

<Items>

<ej:DropDownListItem Text="Text1" Value="1"></ej:DropDownListItem>

<ej:DropDownListItem Text="Text2" Value="2"></ej:DropDownListItem>

<ej:DropDownListItem Text="Text3" Value="3"></ej:DropDownListItem>

</Items>

</ej:DropDownList>

$(document).ready(function () {

 //what should I write to update the second drop down list item's text

});

Thanks,

   Tomer

[tomer]

I think I found the solution:

//1. get drop down list data

var items = $("#DropDownList1").ejDropDownList("getListData");

//2. update drop down list item's text

items[1].text = "a new text";

//3. update drop down list data source

$("#DropDownList1").ejDropDownList({dataSource: items});

[Keerthana Rajendran]

Hi Tomer, 

 

Thanks for contacting Syncfusion support. 

 

Yes, you can change the DropDownList’s text by changing the item in getListData. Before changing the dataSource please empty the existing dataSource of DropDownList and then rebind the new list items as dataSource as shown below 

 

  function onChange(args) { 

           

          var items = $("#skillsets").ejDropDownList("getListData"); 

          items[1].text = "a new text"; 

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

          target.setModel({dataSource:null});     //empty the existing dataSource  

          target.setModel({dataSource:items});   //bind new dataSource. 

        } 

 

 

Please refer to the below sample. 

 

https://jsplayground.syncfusion.com/rhe3g4i4 

 

Regards, 

Keerthana.