如何解决无法使用jQuery清除输入字段
我在ASP.NET Core 3.0中有一个简单的页面。使用Blazor框架。 页面的SELECT如下：
<select id="AppSelect" class="form-control form-control-sm border border-secondary" >
<option value="-">--- Select ---</option>
<option value="-">Books</option>
</select>
在更改“选择列表”选项时，我想触发一个jQuery函数，该函数应清空“表单”的“输入”字段中的所有文本。
我在wwwroot文件夹下添加了一个.js文件，其代码为：
$(".form-control-sm").change(function () {
$(this).closest('form').find("input[type=text],textarea").val("");
});
我什至尝试过：
$("#AppSelect").change(function () {
$(this).closest('form').find("input[type=text],textarea").val("");
});
似乎不是在触发jQuery代码并清除字段。
我在Pages文件夹下的_Host.cshtml文件中添加了对.js的引用。
使用以下代码生成输入字段：
<!-- Input fields -->
@for (var i = 0; i < 6; i++)
{
var index = i;
<div class="form-row">
<div class="col-sm-8">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" @bind="booksmod.Id[index]" />
</div>
</div>
<div class="col-sm-4">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" @bind="booksmod.Name[index]" />
</div>
</div>
</div>
}
解决方法
如果您使用Blazor作为注释建议，则无需使用jQuery来实现：
<form>
<div class="form-inline">
<select class="form-control mr-1" @bind="@FruitType">
<option value="@(string.Empty)">Select</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pear">Pear</option>
</select>
<input class="form-control mr-1" placeholder="Name" @bind="fruit.Name" />
<input class="form-control" placeholder="Colour" @bind="fruit.Color" />
</div>
</form>
@code {
public string FruitType
{
get => this.fruitType;
set
{
if (this.fruitType == value) return;
this.fruitType = value;
ClearProperties();
}
}
void ClearProperties()
{
fruit.Color = "";
fruit.Name = "";
}
string fruitType = "";
Fruit fruit = new Fruit();
}
#LookMaNoJava：）
我测试了您的代码，并通过对选择输入以及文本区域和文本输入使用换行形式使其工作，如下所示：
<form class="my-form">
<select id="AppSelect" class="form-control form-control-sm border border-secondary" >
<option value="-">--- Select ---</option>
<option value="-">Books</option>
</select>
<input type="text" />
<textarea/>
</form>
如果要将选择项保留在表单之外，则应使用如下所示的类来更精确地定位表单：
$(".form-control-sm").change(function () {
$('form.my-form').find("input['type=text'],textarea").val("");
});
一种好的做法是，设置可读取或使用的值，以使其易于访问和不可理解。
编辑：您的输入内容在HTML中缺少type =“ text”，这会阻止CSS选择器input[type=text]选择输入内容。
如果您在CSS选择器中省略了[type=text]，它将起作用：
$("select.form-control-sm").change(function () {
$(this).closest('form').find("input,textarea").val("");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select id="AppSelect" class="form-control form-control-sm border border-secondary" >
<option value="-">--- Select ---</option>
<option value="-">Books</option>
<option value="-">Magazines</option>
<option value="-">Newspapers</option>
</select>
<div class="form-row">
<div class="col-sm-8">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" id="id0" value="something" />
</div>
</div>
<div class="col-sm-4">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" name="name0" value="something" />
</div>
</div>
<div class="col-sm-8">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" id="id1" value="something" />
</div>
</div>
<div class="col-sm-4">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" name="name1" value="something" />
</div>
</div>
<div class="col-sm-8">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" id="id2" value="something" />
</div>
</div>
<div class="col-sm-4">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" name="name2" value="something" />
</div>
</div>
</div>
</form>
是的，当然-“不用说”-您必须使用<select>元素嵌入所有<input>和<form>元素。否则，您的.closest('form')将找不到任何机会。
我测试它的方式不会与[type=text]一起使用，请参见下文：
$("select.form-control-sm").change(function () {
$(this).closest('form').find("input[type=text],textarea").val("");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select id="AppSelect" class="form-control form-control-sm border border-secondary" >
<option value="-">--- Select ---</option>
<option value="-">Books</option>
<option value="-">Magazines</option>
<option value="-">Newspapers</option>
</select>
<div class="form-row">
<div class="col-sm-8">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" id="id0" value="something" />
</div>
</div>
<div class="col-sm-4">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" name="name0" value="something" />
</div>
</div>
<div class="col-sm-8">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" id="id1" value="something" />
</div>
</div>
<div class="col-sm-4">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" name="name1" value="something" />
</div>
</div>
<div class="col-sm-8">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" id="id2" value="something" />
</div>
</div>
<div class="col-sm-4">
<div class="justify-content-center mb-2">
<input class="form-control form-control-sm border border-secondary" name="name2" value="something" />
</div>
</div>
</div>
</form>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。