text box have it,s text from DDl

I have a drop-down list which gathers data from the database and a textbox which contains the text from the drop-down list when I select a value from the drop-down list. I tried to make this work, but no data appears in the textbox when I select a value from the drop-down list and no errors appear either. Can anyone help me?

aspx Code:

<table id="Tbl" runat="server" width="70%" border="1" cellspacing="1" cellpadding="1">
        <tr>
            <td>
                Select
            </td>
            <td>
                <asp:SqlDataSource ID="SDSOption" runat="server" ConnectionString="Data Source=ELARABY-1EACFA3\SQLEXPRESS;Initial Catalog=ElarabyGroup;Integrated Security=True"
                    ProviderName="System.Data.SqlClient" SelectCommand="SELECT [Id], [option] FROM [Option]">
                </asp:SqlDataSource>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SDSOption" DataTextField="option"
                            DataValueField="Id" ondatabound="DropDownList1_DataBound" 
                            onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                        </asp:DropDownList>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </td>
            <td>
                <b style="font-style: italic">Select Option</b> <b style="font-style: italic">
                    <br />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TxtOption"
                        Display="Dynamic" ErrorMessage="*" SetFocusOnError="True"><b style="font-style: italic">*</b></asp:RequiredFieldValidator>
                </b>
            </td>
        </tr>
        <tr>
            <td class="style2">
                <asp:Label ID="LblOption" runat="server" Text="Option"></asp:Label>
            </td>
            <td class="style1">
                <asp:TextBox ID="TxtOption" runat="server"></asp:TextBox>
            </td>
            <td>
                <b style="font-style: italic">Note:Add Here Product Option</b> <b style="font-style: italic">
                    <br />
                    <asp:RequiredFi开发者_如何学编程eldValidator ID="RVOption" runat="server" ControlToValidate="TxtOption"
                        Display="Dynamic" ErrorMessage="*" SetFocusOnError="True"><b style="font-style: italic">*</b></asp:RequiredFieldValidator>
                </b>
            </td>
        </tr>
        <tr style="font-style: italic">
            <td class="style2">
                &nbsp;
            </td>
            <td>
                <asp:Button ID="BtnSubmit" runat="server" Height="20px" Text="Submit" Width="50px"
                    OnClick="BtnSubmit_Click" />
                &nbsp;
            </td>
            <td align="left">
                &nbsp; <b><i><span><a href="EditOption.aspx">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Backend/Image/www_4photos_net_1137678404.jpg"
                        Width="60px" /></a> Display Other </span></i></b>
            </td>
        </tr>
    </table>

CS Code:

 protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        TxtOption.Text += DropDownList1.SelectedItem.Value;
    }

The DropDownList is wrapped in an UpdatePanel, but the TextBox is not.

What this means is during the asychronous postback (triggered on the SelectedIndexChanged event), the postback only has visiblity of the controls inside the UpdatePanel (as this is all that gets submitted to the server).

Because the TextBox is outside the UpdatePanel, it does not have visibility of it during the async postback.

The easiest solution would be to put the Textbox inside the UpdatePanel.

Another solution would be to use ScriptManager.RegisterStartupScript to set the value of the control from the SelectedIndexChanged event using basic JavaScript (which has access to the entire DOM, unlike the asynchronous postback).

E.g

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(UpdatePanel1, 
    this.GetType(), 
    "NameOfScript", 
    string.Format("document.getElementById('{0}').value = '{1}';",
    txtOption.ClientId,
    DropDownList1.SelectedValue));
}