从DropDownList选择ASP.NET/Javascript填充文本框

Question

I have a DDL and ASP.NET Textbox. I would like to populate the text box with the option I choose from the DDL. I need this to be instant and not use postbacks so it would seem JavaScript would be the obvious choice here. I have done quite a bit of searching but everything I have found seems to be for standard HTML (Selects and Inputs) and these do not appear to work with ASP objects:

<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" DataTextField="FullName" />

<asp:TextBox runat="server" id="txtSalesPerson" />

My DDL is populated from SQL in the code-behind page.

Can somebody assist with the appropriate code I should use? Thanks.

Answer 1

ASP.Net controls render as standard HTML elements on the browser. In script, you can get a reference to them by using the ClientID property of the ASP.Net control.

Put this in a script block in your aspx:

var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');

Now you have references to the DOM objects for the select and input elements that the ASP.Net controls rendered and you can use the techniques you've already learned on the HTML elements.

Additional info You need to add an onchange attribute to your DropDownList control as such:

<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" onchange="ddlChange();" DataTextField="FullName" />

and then put this script block in your aspx

<script type="text/javascript">

    function ddlChange()
    {
        var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
        var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');

        textBox.value = ddl.options[ddl.selectedIndex].text;
    }

</script>

As you change the dropdown list, you'll see the textbox update. Tested in IE and Chrome.

Answer 2

Since you've pointed out that you're a JavaScript beginner, may i suggest you use an updatepanel control. An updatepanel allows you to execute server code without refreshing the page. Simply place the dropdownList and the textbox in the same updatepanel or in two separate updatepanels and write the code for the textbox to update based on the dropdownlist selection. Make sure to set the dropdownlist to do autopostback. The asp markup is as follows:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlList" runat="server" 
        AutoPostBack="True">
        <asp:ListItem>-select-</asp:ListItem>
        <asp:ListItem>option 1</asp:ListItem>
        <asp:ListItem>option 2</asp:ListItem>
    </asp:DropDownList>
<asp:TextBox ID="txtTextBox" runat="server" />

</ContentTemplate> 
</asp:UpdatePanel> 

The codebehind in vb is as follows:

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If ddlList.Text <> "-select-" then
           txtTextBox.Text = ddlList.text
        End If
    End Sub

Answer 3

If you're new to JavaScript, use the jQuery library (simply provide references to the CDN-hosted jQUery files at google.com) and then you can use the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $("#DDLSalesPerson").change(function () {
        $("#txtSalesPerson").val($(this).val());
    });
</script>