在鼠標按下/輸入時重置文本字段 - jQuery UI 自動完成

Question

包含我在工作 state 中的代碼的簡單 JS 小提琴

我有一個jQuery UI 自動完成字段，附加了一個下拉按鈕。 但是，它的工作原理很簡單-您必須手動刪除字段內的單詞才能進行搜索，這有點煩人。

我不確定jQuery UI是否有它的功能，除非我很想知道。

我嘗試將 onClick 函數與 JS 一起使用，但是由於我的字段不完全是“表單字段”，所以我在這里有點迷失了。

我的目標是：當用戶按下它時重置文本字段。它里面有預先寫好的文本“請 select（或類型）”

我的 cshtml 文件如下所示 cshtml

它在瀏覽器瀏覽器上看起來像這樣

圖 1 的代碼：

<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
        <option selected="selected" type="text" onclick="resetText()" value="0">Please select (Or Type)</option>
    </select>
    <span asp-validation-for="Dinosaur" class="text-dark" />

如您所見，其中包含文本，我必須先按 CTRL + A、DELETE 才能在我的字段中搜索。

function 在用戶按下時清除此文本將減輕壓力。

我可能只是愚蠢地看到了簡單的解決方案，我只是覺得我已經嘗試了一些我認為可行的方法。 （作為附有 JS 代碼的 onclick="ResetText()"）

當我單擊drop down這就是顯示的內容。

此致，

Answer 1

您不想在選項元素上連接 onclick 偵聽器，而是希望在 select 元素上連接 onchange 事件偵聽器。 選項元素不支持 onclick。

Answer 2

使用onchange而不是使用onclick並且此操作應在select標記上。 不在選項上。 試試這個例子。

 $('select').on('change', function() { if (this.value === 'disabled') { this.value = ''; } console.log(this.value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()"> <option selected="selected" type="text" value="disabled">Please select (Or Type)</option> <option type="text" value="One">One</option> <option type="text" value="two">two</option> </select> <span asp-validation-for="Dinosaur" class="text-dark" />