web表单：在JavaScript选项动态添加到一个DropDownList [英] webforms : add dynamically in javascript option to a dropdownlist

问题描述

我的深化发展一个asp.net web表单应用程序。我的网页是由2下拉列表。结果
在上ddl1每个选择，我要动态地通过JavaScript ddl1所选元素添加DDL2。默认情况下首次加载页面时，ddl1是由3个元素（A，B，C）和DDL2仅由一个元素（一）。

I am developping an asp.net 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).

<script>
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;
   ddl2.add(option);
}
</script>

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

这是我的code_behind code：

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);
   }
   base.Render(writer);
}

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

      this.ddl2.Items.Clear();
      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;

}

通过以​​下code，当我第一次加载我的网页，我ddl1是由A，B，C和我DDL2组成的。然后我选择我的ddl1 B，这个元素被添加到我的DDL2。我选择在我的DDL2这个元素，然后点击我的按钮。但是，当我在我的button1_Click处理程序到达，我选择的价值仍然是一个，我不明白。

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.

推荐答案

插在客户端code的项目在code-后面不会被持久化。你可以建立一个<一个href=\"http://forums.asp.net/t/1275211.aspx?add%20items%20to%20a%20dropdown%20list%20using%20javascript%20\"相对=nofollow>机制涉及隐藏字段来获取值回来，但我认为最简单的解决办法是在$ C $添加的项目C-后面使用一个UpdatePanel，以避免刷新整个页面。

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:ScriptManager>
...
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" onselectedindexchanged="ddl_SelectedIndexChanged" />
        <asp:DropDownList ID="ddl2" runat="server" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddl3" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>
<asp:DropDownList ID="ddl3" runat="server" AutoPostBack="true" onselectedindexchanged="ddl_SelectedIndexChanged" />

由于属性 ChildrenAsTriggers 在UpdatePanel的默认为true，在 ddl1 选择将更新面板。另一方面， ddl3 将产生类似的效果，因为它是registerd作为在UpdatePanel的触发

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.

以下事件处理程序可以由双方使用 ddl1 和 ddl3 ：

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));
    ddl.Focus();
}

请注意，的ClientIDMode =静态，因为它不具有的UpdatePanel拌匀已被删除。

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

我列入标记作为提示的ScriptManager的声明，因为它使用的UpdatePanel时是必需的。

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

这篇关于web表单：在JavaScript选项动态添加到一个DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！