jquery 根据输入字段值更改选择选项的属性[重复]

igetnqfo  于 2023-11-17  发布在  jQuery
关注(0)|答案(1)|浏览(105)

此问题在此处已有答案

Filter options of drop down menus with different values(1个答案)
27天前关闭
我一直在谷歌和检查周围,但没有找到一个答案,这一点,我不知道如何去这样做。
我有一个文本输入字段,用户可以在其中输入一个值。当他们输入时,我希望它旁边的下拉菜单更改为具有匹配值的选项。

<input type="text" name="search" maxlength="6" id="search" />
<select name="custlist" id="custlist">
<option value="" selected>---SELECT ONE--</option>
<option value="100123">Customer 1</option>
<option value="100124">Customer 2</option>
etc., etc.,
</select>

字符串
因此,如果我开始在文本输入中输入1001.,它将更改所选选项以匹配输入文本。
我已经有它的工作方式相反,如果你选择一个选项,它会自动填写输入文本字段的选项值(见下文)。
HTML

<input type="text" name="search" maxlength="6" id="search" />
<select name="custlist" id="custlist" onchange="changeFunc()">
<option value="" selected>---SELECT ONE--</option>
<option value="100123">Customer 1</option>
<option value="100124">Customer 2</option>
etc., etc.,
</select>


jQuery

function changeFunc(){
var x = document.getElementById("custlist").value;
document.getElementById("search").value = x;
}


如有任何帮助,我们将不胜感激。

hmae6n7t

hmae6n7t1#

您可以使用Array.prototype.filter()和Element的hidden属性以及以下内容的组合:

const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);

const elSearch = el("#search");
const elCustlist = el("#custlist");
const elsCustlistOpts = els("option:not([disabled])", elCustlist);

const selectCustlistOption = () => {
  const search = elSearch.value.trim();
  const filteredOpt = [...elsCustlistOpts].filter(elOpt => {
    const match = elOpt.value.includes(search);
    elOpt.hidden = !match;
    return match;
  });
  elCustlist.value = filteredOpt.length ? filteredOpt[0].value : "";
};

elSearch.addEventListener("input", selectCustlistOption);

个字符

相关问题