javascript - 如何使用 ASP.NET WebForms 中的 JavaScript 将 FormView 中的 DropDownList 中的文本获取到 TextBox 中？

Question

我试图将选定的文本(不是值)从 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。我缺少什么，或者我需要更改什么才能捕获所选值？

Answer 1

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

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

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();