第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

無法使用 jQuery 清除輸入字段

無法使用 jQuery 清除輸入字段

慕蓋茨4494581 2023-02-24 15:35:44
我在 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>在更改“選擇列表”選項時，我想觸發(fā)一個 jQuery 函數(shù)，該函數(shù)應(yīng)清空表單輸入字段中的所有文本。我在 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("");});似乎它沒有觸發(fā) 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>            }
查看完整描述

3 回答

?
慕哥9229398

TA貢獻1877條經(jīng)驗 獲得超6個贊

如果您按照評論建議使用 Blazor，則無需使用 jQuery 來實現(xiàn)此目的：


 <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


查看完整回答
反對 回復(fù) 2023-02-24
?
德瑪西亞99

TA貢獻1770條經(jīng)驗 獲得超3個贊

我測試了您的代碼，并通過對選擇輸入以及文本區(qū)域和文本輸入使用包裝形式使其正常工作，如下所示：


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

如果您想將選擇保留在表單之外，您應(yīng)該更精確地定位您的表單，使用如下類：


$(".form-control-sm").change(function () {

  $('form.my-form').find("input['type=text'], textarea").val("");

});

為了可訪問性和不可理解性，一個好的做法是為您的選擇選項設(shè)置可以讀取或使用的值。


編輯：您的輸入在 HTML 中缺少 type="text"，這會阻止它們被 css 選擇器選中input[type=text]。


查看完整回答
反對 回復(fù) 2023-02-24
?
一只名叫tom的貓

TA貢獻1906條經(jīng)驗 獲得超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>

是的，當(dāng)然——“這是不言而喻的”——你必須將你的所有元素<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>


查看完整回答
反對 回復(fù) 2023-02-24
  • 3 回答
  • 0 關(guān)注
  • 186 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號