从 DropDownList 选择 ASP.NET/Javascript 填充 TextBox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4922831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate a TextBox from a DropDownList selection ASP.NET/Javascript
提问by James
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:
我有一个 DDL 和 ASP.NET 文本框。我想用我从 DDL 中选择的选项填充文本框。我需要这是即时的，而不是使用回发，所以看起来 JavaScript 将是这里的明显选择。我已经做了很多搜索，但我发现的一切似乎都是针对标准 HTML（选择和输入）的，而且这些似乎不适用于 ASP 对象：
<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.
我的 DDL 是从代码隐藏页面中的 SQL 填充的。
Can somebody assist with the appropriate code I should use? Thanks.
有人可以帮助我使用适当的代码吗？谢谢。
回答by Matthew
ASP.Net controls render as standard HTML elements on the browser. In script, you can get a reference to them by using the ClientIDproperty of the ASP.Net control.
ASP.Net 控件在浏览器上呈现为标准 HTML 元素。在脚本中，您可以通过使用ClientIDASP.Net 控件的属性来获取对它们的引用。
Put this in a script block in your aspx:
把它放在你的 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.
现在您已经引用了 ASP.Net 控件呈现的 select 和 input 元素的 DOM 对象，并且您可以使用您已经在 HTML 元素上学到的技术。
Additional infoYou need to add an onchange attribute to your DropDownList control as such:
附加信息您需要向 DropDownList 控件添加一个 onchange 属性，如下所示：
<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" onchange="ddlChange();" DataTextField="FullName" />
and then put this script block in your aspx
然后把这个脚本块放在你的 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.
当您更改下拉列表时，您将看到文本框更新。在 IE 和 Chrome 中测试。
回答by boruchsiper
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:
既然您已经指出您是 JavaScript 初学者，我建议您使用 updatepanel 控件。更新面板允许您在不刷新页面的情况下执行服务器代码。只需将下拉列表和文本框放在同一个更新面板或两个单独的更新面板中，然后编写文本框的代码以根据下拉列表选择进行更新。确保将下拉列表设置为自动回发。asp标记如下：
<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:
vb中的代码隐藏如下：
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
回答by Scott
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:
如果您不熟悉 JavaScript，请使用 jQuery 库（只需在 google.com 上提供对 CDN 托管的 jQUEry 文件的引用），然后您就可以使用以下代码：
<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>
