user2443476 user2443476 - 1 year ago 102
Javascript Question

webforms : add dynamically in javascript option to a dropdownlist

I am developping an webforms application. My page is composed of 2 dropdown list.

At each selection on ddl1, I want to add dynamically via javascript the selected element of ddl1 to ddl2. By default when first loading the page, ddl1 is composed of 3 elements (a,b,c) and ddl2 is only composed of one element (a).

function ddl1_handler()
var ddl2 = document.getElementById("ddl2");
var newOption = document.createElement("option");
newOption.text = document.getElementById("ddl1").value;
newOption.value = document.getElementById("ddl1").value;

<asp:DropDownList ID="ddl1" runat="server" ClientIDMode="Static" onChange="ddl1_handler()">
<asp:DropDownList ID="ddl2" runat="server" ClientIDMode="Static">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>

This is my code_behind code :

private List<string> choices = new List<string>() { "a", "b", "c"};

protected override void Render(HtmlTextWriter writer)
foreach (var choice in choices)
Page.ClientScript.RegisterForEventValidation(ddl2.UniqueID, choice);

protected void Page_Load(object sender, EventArgs e)
if (!this.IsPostBack)
foreach (var choice in choices)
this.ddl1.Items.Add(new ListItem(){ Text = choice, Value = choice});

this.ddl2.Items.Add(new ListItem(){ Text = choices.First(), Value = choices.First()});

protected void Button1_Click(object sender, EventArgs e)
var selectedValue = this.ddl2.selectedValue;


With the following code, when I first load my page, my ddl1 is composed of a,b,c and my ddl2 is composed of a. I then select b on my ddl1, this element is added to my ddl2. I select this element on my ddl2 and then click on my button. But when I arrive on my button1_click handler, my selected value is still a, i don't understand.

Answer Source

The items inserted in client-side code are not persisted in code-behind. You could set up a mechanism involving hidden fields to get the value back but I think the easiest solution is to add the item in code-behind and use an UpdatePanel to avoid refreshing the whole page.

Here is how it could be used, showing how the update can be triggered by a control inside or outside of the panel:

<asp:ScriptManager ID="scriptManager1" runat="server">
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
        <asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" onselectedindexchanged="ddl_SelectedIndexChanged" />
        <asp:DropDownList ID="ddl2" runat="server" />
        <asp:AsyncPostBackTrigger ControlID="ddl3" EventName="SelectedIndexChanged" />
<asp:DropDownList ID="ddl3" runat="server" AutoPostBack="true" onselectedindexchanged="ddl_SelectedIndexChanged" />

Since the property ChildrenAsTriggers of the UpdatePanel is true by default, a selection in ddl1 will update the panel. On the other hand, ddl3 will have a similar effect because it is registerd as a trigger of the UpdatePanel.

The following event handler could be used by both ddl1 and ddl3:

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
    DropDownList ddl = sender as DropDownList;
    ListItem item = ddl.SelectedItem;
    ddl2.Items.Add(new ListItem(item.Text, item.Value));

Please note that ClientIDMode="Static" has been removed since it does not mix well with UpdatePanels.

I included the ScriptManager declaration in the markup as a reminder, since it is required when using UpdatePanels.