webforms：在 javascript 选项中动态添加到下拉列表

Question

我正在开发一个 asp.net 网络表单应用程序。我的页面由 2 个下拉列表组成。
在 ddl1 上的每个 selection，我想通过 javascript 将 ddl1 的 selected 元素动态添加到 ddl2。默认情况下，首次加载页面时，ddl1 由 3 个元素 (a,b,c) 组成，而 ddl2 仅由一个元素 (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 代码：

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;

}

使用下面的代码，当我第一次加载我的页面时，我的 ddl1 由 a、b、c 组成，我的 ddl2 由 a 组成。然后我在我的ddl1上selectb，把这个元素加到我的ddl2上。我 select 这个元素在我的 ddl2 上然后点击我的按钮。但是当我到达我的 button1_click 处理程序时，我的 selected 值仍然是 a，我不明白。

Answer 1

客户端代码中插入的项目不会保留在代码隐藏中。您可以设置 mechanism involving hidden fields 来取回值，但我认为最简单的解决方案是在代码隐藏中添加该项目并使用 UpdatePanel 来避免刷新整个页面。

以下是它的使用方法，展示了如何通过面板内部或外部的控件触发更新：

<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" />

由于 UpdatePanel 的属性 ChildrenAsTriggers 默认为真，ddl1 中的选择将更新面板。另一方面，ddl3 将具有类似的效果，因为它被注册为 UpdatePanel 的触发器。

ddl1 和 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="Static" 已被删除，因为它不能很好地与 UpdatePanels 混合。

我在标记中包含了 ScriptManager 声明作为提醒，因为在使用 UpdatePanels 时需要它。

webforms：在 javascript 选项中动态添加到下拉列表

webforms : add dynamically in javascript option to a dropdownlist

javascript

c#

asp.net

jquery

webforms