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的脚本块中：

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

现在，您已经引用了ASP.Net控件所呈现的选择和输入元素的DOM对象，您可以使用已经在HTML元素上学习的技术。

其他信息 您需要将onchange属性添加到DropDownList控件中：

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

然后将此脚本块放在您的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中测试过。

Answer 2

由于您已经指出您是JavaScript初学者，我建议您使用updatepanel控件。 updatepanel允许您在不刷新页面的情况下执行服务器代码。只需将dropdownList和文本框放在同一个更新面板或两个单独的更新面板中，然后根据下拉列表选项编写要更新的文本框的代码。确保将下拉列表设置为执行自动后备。 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>

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

Answer 3

如果您不熟悉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>

从DropDownList选择ASP.NET / JavaScript填充TextBox

3 个答案: