如何在下拉列表更改时使用 jQuery 清除 TextBox

Posted 2023-05-07

【中文标题】如何在下拉列表更改时使用 jQuery 清除 TextBox

【英文标题】：How to use jQuery to clear TextBox on drop down list change

【发布时间】：2011-12-14 22:30:37

【问题描述】：

我正在尝试清除一个 ASP.NET 文本框，当用户更改项目时设置为 MultiLine（即 textarea），这里是下拉列表：

<label id="Label1" class="lbl">Project</label>

<asp:DropDownList ID="ddlProjectList" DataTextField="ClientProjectTitle" 
DataValueField="ProjectID" AppendDataBoundItems="true" CssClass="ddl"
AutoPostBack="true" ValidationGroup="Projects" runat="server">
    <asp:ListItem Text="-- select --" Value="0"></asp:ListItem>
</asp:DropDownList>

<asp:RequiredFieldValidator ID="rfvProjectList" ControlToValidate="ddlProjectList" 
InitialValue="0" Text="(required)" ErrorMessage="Select a project" 
Display="Dynamic" ValidationGroup="Projects"
CssClass="error" runat="server"></asp:RequiredFieldValidator>

这里是 jQuery：

<script type="text/javascript">
    $(document).ready(function() 
        $('select[name*="ddlProjectList"]').change(function() 
            $('textarea[name*="txtDescription"]').attr('value', '');
        );
    );
</script>

在人们回应之前，我已经尝试了 .val(''); - 这是我要清除的文本框：

<label class="lbl">Description</label>

<asp:TextBox ID="txtDescription" TextMode="MultiLine" Rows="5" 
CssClass="long-textbox-ml"  runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvDescription" ControlToValidate="txtDescription"
Text="(required)" ErrorMessage="Enter a description" Display="Dynamic"
ValidationGroup="Projects"
CssClass="error" runat="server"></asp:RequiredFieldValidator>

任何想法为什么它不起作用？我已经在 Chrome 中逐步完成了它，并且事件正在触发。

【问题讨论】：

不要使用.attr('value','') 使用.val('')。该死的，刮掉那个。尝试在您的更改功能中有一个调试警报框？仔细检查它是否被解雇。

你能发布渲染的 html 吗？我对 ASP 不是很熟悉。

【参考方案1】：

下拉列表中有“AutoPostBack="true"'。这会将表单发布回同一页面，导致页面重新加载。您的 JQuery 事件试图在重新加载发生之前触发，但是一旦触发重新加载，您将失去 JQuery 函数所做的所有工作。

更新：在触发该事件时，删除“AutoPostBack=true”或将文本字段的“文本”属性设置为代码后面的空字符串（从您的问题中不确定该下拉菜单是否触发了命名函数变化）

tbNumAcres.Text = "";

【讨论】：

我认为您在这里遇到了一些问题，格雷厄姆，我注意到它正在清除第一个 OnSelectedIndexChanged，但不是后续的，需要找到解决方法！

是的，这很可能是因为在第一次回发之后，卡在 txtDescription 中的值被记录在 ASP.NET ViewState 中，所以它在页面被下拉更改“重新加载”后仍然存在。您需要在 CODE 中清除文本字段，而不是在 jQuery 中。

不管我在下面写了什么 - 你首先提出的建议是回帖导致了这种情况 - 所以我接受了你的建议，谢谢格雷厄姆。

谢谢！在我更新答案之前，我没有注意到您发布了最终解决方案。很高兴你明白了这一点。如果您不小心，ASP.NET WebForms 自动生成的 javascript 经常会与您自己的 JS 发生冲突。这是我正在研究 ASP MVC 的原因之一。

【参考方案2】：

试试这个：

$("#<%=ddlProjectList.ClientID%>").change(function(e)
    $("#<%=txtDescription.ClientID%>").text(""); //or val("")
);

另外，我不知道你在用 AutoPostBack="true" 做什么，但如果你没有将它用于任何事情，我会删除它。

【参考方案3】：

我们需要查看更多页面，甚至可能是它的渲染版本，但如果我不得不猜测，您的选择器并没有像您想象的那样找到元素。

在我看来，您最好的选择是使用 Chrome 中的控制台或 Firebug 控制台并粘贴到您的选择器中：

$('textarea[name*="txtDescription"]')

控制台应突出显示或返回与该选择器匹配的元素列表。如果没有，那是你的问题......

这是一个随机的 SO 帖子，如果有帮助，它会提供控制台的屏幕截图：

testing jQuery statements in Chrome JavaScript console

【参考方案4】：

您使用$('textarea[name*="txtDescription"]') 而不是仅仅使用$('#txtDescription') 有什么原因吗？

.val("") 应该可以工作，attr('value', '') 或.empty() 也应该可以工作，所以这里的问题可能是你的选择器不能正常工作。

【参考方案5】：

假设您的选择器正确且事件实际触发，请尝试此操作...

$(document).ready(function() 
    $('select[name*="ddlProjectList"]').change(function() 
        $('#txtDescription').val('');
    );
);

我认为您的 txtDescription 选择器失败了。

编辑：基于 Tariqulazam 的评论...

$(document).ready(function() 
    $('select[name*="ddlProjectList"]').change(function() 
        $('#<%=txtDescription.ClientID%>').val('');
    );
);

【讨论】：

这绝对行不通。因为 ASP.NET 会以不同的方式发出 txtDescription 文本框的 ID。我会建议使用 $('# ').val('');

大家好，这是 Chrome 中的文本区域（检查元素）：

@Tariqulazam 我真的很讨厌 jQuery 中的代码块，它会导致安全问题，这就是我倾向于使用名称选择器的原因。

@Tariqulazam：那么安全问题是什么？

@Musefan - 虽然在您的场景中，我没有看到任何特定的安全问题，但使用内联代码存在问题。我不确定，但您可能从microsoft.com/download/en/… 阅读了此文档。它很安静（我还没有完成）但值得一看。

【参考方案6】：

用 C# 代替：

if (!IsPostBack)
    
        GetLiveProjects();
        GetClients();
        GetWeekRows();

        //if (Request.QueryString["SelectedDate"] != null)
        //
        //    GetItineryForDay(Convert.ToDateTime(Request.QueryString["SelectedDate"]));
        //
        //else
        //
        //    DateTime dt = DateTime.Now;
        //    GetItineryForDay(dt);
        //
    
    else
    
        txtDescription.Text = string.Empty;
    

利用下拉列表的回发 - 感谢大家的帮助！

【参考方案7】：

试试：

$(document).ready(function()    
    $('[id$=ddlProjectList]').change(function()   
        $('[id$=txtDescription]').val('');  
    );  
);  

编辑 正如 Graham 所说，将 ddl AutoPostBack 设置为 false。否则 jQuery 处理程序将无法按您的预期工作。

此外，您可以使用 console.log 查看您的处理程序是否被触发（在 Chrome 中按 F12 以访问开发人员工具，然后单击控制台按钮）

$(document).ready(function()    
    $('[id$=ddlProjectList]').change(function()   
        console.log("I'm in!");
        $('[id$=txtDescription]').val('');  
    );  
);