如何使用 ASP.NET WebForms 中的 JavaScript 从 FormView 中的 DropDownList 将文本放入 TextBox？答案

【问题标题】：How to get text into a TextBox from a DropDownList in FormView using JavaScript in ASP.NET WebForms?如何使用 ASP.NET WebForms 中的 JavaScript 从 FormView 中的 DropDownList 将文本放入 TextBox？
【发布时间】：2018-10-02 05:38:46
【问题描述】：

我正在尝试将所选文本（不是值）从 DropDownList 获取到 TextBox。 DropDownList 位于我的 FormView 控件的 EditITemTemplate 中，但 TextBox 不在。

这是我尝试使用的 js：

<script type="text/javascript">
    function GetDdlText() {
        var fvmode = ('<%=fvPhaudDets.CurrentMode.ToString()%>');
        if (fvmode == "Edit") {
            var ddl = document.getElementById('<%=fvPhaudDets.FindControl("QOpClsCallDdl")%>');
            var txt = document.getElementById("txtbox");
            var selectedText = ddl.options[ddl.selectedIndex].Value;
            txt.Text = selectedText;
            txt.focus();
        }
    }
</script>

这是我调用 js 的 OnSelectedIndexChanged 事件：

protected void QOpClsCallTextBox_OnSelectedIndexChanged(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "TheTxt", "GetDdlText();", true);
}

因此，只要在 DropDownList 中选择了新值，所选文本就会填充 TextBox，但不会有任何值进入 TextBox。我遗漏了什么，或者我需要更改什么来捕获所选值？

【问题讨论】：

标签： javascript c# asp.net

【解决方案1】：

下面的 sn-p 应该可以工作。您的 javascript 代码存在一些问题。主要是大写的使用以及Webforms和javascript函数的混合。

首先，要找到您需要 ClientID 的 DDL

fvPhaudDets.FindControl("QOpClsCallDdl").ClientID

然后使用正确的 javascript ddl.options[ddl.selectedIndex].text，而不是 .Value 设置文本框文本也是如此。是txt.value = selectedText;，不是txt.Text。

<script type="text/javascript">
    function GetDdlText() {
        var fvmode = ('<%=fvPhaudDets.CurrentMode.ToString()%>');
        if (fvmode == "Edit") {
            var ddl = document.getElementById('<%= fvPhaudDets.FindControl("QOpClsCallDdl").ClientID %>');
            var txt = document.getElementById("txtbox");
            var selectedText = ddl.options[ddl.selectedIndex].text;
            txt.value = selectedText;
            txt.focus();
        }
    }
</script>

更新

要检查 FormView 是否处于编辑模式，请使用此行

var ddl = document.getElementById('<%= fvPhaudDets.CurrentMode == FormViewMode.Edit ? fvPhaudDets.FindControl("QOpClsCallDdl").ClientID : "" %>');

更新 2（完整的工作示例）

<asp:FormView ID="fvPhaudDets" runat="server">
    <EditItemTemplate>

        <asp:DropDownList ID="QOpClsCallDdl" runat="server" onchange="GetDdlText()">
            <asp:ListItem>aaa</asp:ListItem>
            <asp:ListItem>bbb</asp:ListItem>
            <asp:ListItem>ccc</asp:ListItem>
        </asp:DropDownList>

    </EditItemTemplate>
</asp:FormView>

<input type="text" id="txtbox" />

<script type="text/javascript">
    function GetDdlText() {
        var fvmode = ('<%=fvPhaudDets.CurrentMode.ToString()%>');
        if (fvmode == "Edit") {
            var ddl = document.getElementById('<%= fvPhaudDets.CurrentMode == FormViewMode.Edit ? fvPhaudDets.FindControl("QOpClsCallDdl").ClientID : "" %>');
            var txt = document.getElementById("txtbox");
            var selectedText = ddl.options[ddl.selectedIndex].text;
            txt.value = selectedText;
            txt.focus();
        }
    }
</script>

用于测试的代码

fvPhaudDets.DataSource = new string[1];
fvPhaudDets.ChangeMode(FormViewMode.Edit);
fvPhaudDets.DataBind();

【讨论】：

感谢您的反馈和帮助。我收到您提供的代码的空引用异常，但如果我删除“.ClientID”则不会。我认为问题在于 FormView 的当前模式。页面加载时出现异常，因此它没有检查当前模式是否为“编辑”。
你是对的。我只是在编辑模式下测试。更新了我的答案。
我更新了代码以匹配您的代码，但它没有从下拉列表中获取值。我在控制台中收到一个错误，指示下拉列表中的值为空。我尝试从按钮以及从 DropDownList 的 onchange 调用该函数，但我得到了同样的错误。如果您有任何其他想法，请告诉我，我也会继续努力。

【解决方案2】：

试试这个，看看是否有帮助。我认为你的问题是你没有使用，

客户 ID

这与您的代码不完全相同。但类似..您可以更改下面的代码以满足您的需要。

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderHead" runat="Server">
    <script src="../scripts/jquery-1.9.1.min.js"></script>
    <script>
        function onDDLChange() {
            var selectedVal = document.getElementById('<%=ddl1.ClientID%>').value;
            var selectedTxt = document.getElementById('<%=ddl1.ClientID%>').options[selectedVal].text;
            console.log(selectedTxt);
            document.getElementById('<%=tb1.ClientID%>').value = selectedTxt;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="Server">
    <asp:DropDownList runat="server" ID="ddl1" onchange="onDDLChange();">
        <asp:ListItem Text="" Value=""></asp:ListItem>
        <asp:ListItem Text="one" Value="1"></asp:ListItem>
        <asp:ListItem Text="two" Value="2"></asp:ListItem>
    </asp:DropDownList>

    <asp:TextBox runat="server" ID="tb1"></asp:TextBox>
</asp:Content>

【讨论】：