JavaScriptを使用してオプションが追加されたときに、コードド​​ロップでDropDownListのSelectedValueを読み取るにはどうすればよいですか？

Question

JavaScriptを使用してオプションが追加されたときに、コードド​​ロップでDropDownListのSelectedValueを読み取るにはどうすればよいですか？

もう少し背景：私はドロップダウンリストを持っており、JavaScriptを使って値を入力したいので、ユーザーが最初のドロップダウンリストで選択を変更したときにポストバックを避けるようにします。

私は更新パネルを使用できません。

シンプルなデモで問題を実演しています。ここに私のマークアップコードは次のとおりです。

<p> 
    <asp:DropDownList runat="server" ID="FilterDropDownList" /> 
</p> 
<p> 
    <asp:Button runat="server" ID="SearchButton" Text="Search" 
     onclick="SearchButton_Click" /><br/> 
    <asp:TextBox runat="server" ID="QueryTextBox" /> 
</p> 
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     var filterDropDownListId = '#<%= FilterDropDownList.ClientID %>'; 

     $(filterDropDownListId).append($('<option>').prop('value', 'Alpha').html('A')); 
     $(filterDropDownListId).append($('<option>').prop('value', 'Beta').html('B')); 
    }); 
</script> 

そして、私は、次のしている背後にあるコードで：

protected override void Render(HtmlTextWriter writer) 
{ 
    // Register the allowed values for the down down list. 
    Page.ClientScript.RegisterForEventValidation(FilterDropDownList.UniqueID, "Alpha"); 
    Page.ClientScript.RegisterForEventValidation(FilterDropDownList.UniqueID, "Beta"); 

    base.Render(writer); 
} 

protected void SearchButton_Click(object sender, EventArgs e) 
{ 
    Response.Redirect(
     String.Format("{0}?dropdown={1}&query={2}", 
      Request.Url.AbsolutePath, 
      FilterDropDownList.SelectedValue, 
      QueryTextBox.Text)); 
} 

問題はFilterDropDownList.SelectedValueが空であること、です。私はそれが "アルファ"か "ベータ"のどちらかであると予想していただろう。私は問題なくQueryTextBox.Textの値を読むことができます。

JavaScriptを使用して値が入力されている場合、MyDropDownList.SelectedValueを読み取ることはできますか？それとも、別のアプローチを使わなければならないのですか？

Answer 1

JavaScriptを使用して、選択した値を常に非表示のテキストボックスに書き込んで、コードビハインドの値を読み取ることができます。