无法使用 jQuery 清除输入字段

Question

我在 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>            }

Answer 1

如果您按照评论建议使用 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();

}

https://i.stack.imgur.com/4GkAz.gif

Answer 2

我测试了您的代码，并通过对选择输入以及文本区域和文本输入使用包装形式使其正常工作，如下所示：

<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]。

Answer 3

如果您在 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>