webforms：在javascript選項中動態添加到下拉列表

我正在開發一個asp.net webforms應用程序。我的頁面由2個下拉列表組成。
在ddl1上的每個選擇上，我想通過javascript將ddl1的選定元素動態添加到ddl2。默認情況下，當第一次加載頁面時，ddl1由3個元素（a，b，c）組成，ddl2僅由一個元素（a）組成。webforms：在javascript選項中動態添加到下拉列表

<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組成的。然後我選擇我的ddl1，這個元素被添加到我的ddl2。我在ddl2上選擇這個元素，然後點擊我的按鈕。但是，當我到達我的button1_click處理程序時，我選定的值仍然是a，我不明白。

來源

2016-04-30 user2443476

在客戶端代碼中插入的項目不會保留在代碼隱藏中。您可以設置一個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"因爲它不具有的UpdatePanel拌勻已被刪除。

我在標記中包含ScriptManager聲明作爲提醒，因爲它在使用UpdatePanel時是必需的。

來源

2016-04-30 15:35:33 ConnorsFan

感謝您的回答。我對webforms完全陌生，我只有一個問題，如果我明白了，我將ddl1放在updatePanel中，因爲我想觸發一個沒有完全刷新的回發，但爲什麼還需要將ddl2也放入它呢？ – user2443476

@ user2443476 - 事實上，反過來說：'ddl2'必須在UpdatePanel中才能被更新，而不需要更新整個頁面，但'ddl1'可以在它之外，並且仍然觸發'ddl2'的更新。。我修改了我的答案，以顯示如何使用控制'ddl3'完成。最後，要檢查UpdatePanel是否工作，可以進行此測試：在UpdatePanel中添加一個Label，並在其外部添加一個Label，並在'ddl_SelectedIndexChanged'事件處理程序中更改它們的內容。您將看到只有面板內的標籤被更新。 – ConnorsFan

感謝您的幫助和明確的解釋。 – user2443476

webforms：在javascript選項中動態添加到下拉列表

回答

相關問題