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

Question

我正在尝试清除 ASP.NET 文本框，当用户更改项目时设置为 MultiLine （换句话说，文本区域），这里是下拉列表：

<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 中单步执行了它，并且该事件正在触发。

Answer 1

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

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

tbNumAcres.Text = "";

Answer 2

试试这个：

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

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

Answer 3

我们需要查看页面的更多内容，甚至可能是其渲染版本，但如果我不得不猜测，您的选择器没有找到您认为的元素。

我认为最好的选择是使用 Chrome 中的控制台或 Firebug 控制台并粘贴到选择器中：

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

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

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

在 Chrome JavaScript 控制台中测试 jQuery 语句

Answer 4

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

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

Answer 5

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

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

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

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

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

Answer 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;
    }

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

Answer 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('');  
    });  
});