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

Question

我有一个 DDL 和 ASP.NET 文本框。我想使用我从 DDL 中选择的选项填充文本框。我需要它是即时的并且不使用回发，因此 JavaScript 似乎是这里显而易见的选择。我已经进行了大量搜索，但我发现的所有内容似乎都是针对标准 HTML(选择和输入)的，并且这些似乎不适用于 ASP 对象:

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

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

我的 DDL 是从代码隐藏页面中的 SQL 填充的。

有人可以协助我使用适当的代码吗？谢谢。

Answer 1

ASP.Net 控件在浏览器上呈现为标准 HTML 元素。在脚本中，您可以使用 ASP.Net 控件的 ClientID 属性获取对它们的引用。

将其放入 aspx 中的脚本 block 中:

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

现在您已经引用了 ASP.Net 控件呈现的 select 和 input 元素的 DOM 对象，并且可以使用已经在 HTML 元素上学到的技术。

其他信息您需要向 DropDownList 控件添加 onchange 属性，如下所示:

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

然后将此脚本 block 放入您的 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>

当您更改下拉列表时，您将看到文本框更新。在 IE 和 Chrome 中进行了测试。