用户单击时筛选选择选项下拉列表

Question

所以我想根据用户点击的id:来过滤select option下拉列表

document.querySelectorAll('#item-types').forEach(item => {
item.addEventListener('click', () => {
const categoriesSelect = document.querySelector('#item-categories')
const categoriesOptions = Array.from(categoriesSelect.options);
const selectType = item.dataset.typeId;
function findMatches(search, categoriesOptions) {
return categoriesOptions.filter(option => {
return option.value.match(search);
});
}
categoriesOptions.forEach(option => {
option.remove();
option.selected = false;
});
const matchArray = findMatches(selectType, categoriesOptions);
categoriesSelect.append(...matchArray);
});
});

<ul>
<li id="item-types" data-type-id="1">
<a href="#">
<div>Type1</div>
</a>
</li>
<li id="item-types" data-type-id="2">
<a href="#">
<div>Type2</div>
</a>
</li>
</ul>
<select id="item-categories">
<option value="1">category1</option>
<option value="1">category2</option>
<option value="1">category3</option>
<option value="2">category4</option>
<option value="2">category5</option>
</select>

但现在，当我单击第一个项目的任何列表项目时，它都会过滤掉，但当我第二次单击它时，它会返回options的空数组。

Answer 1

试试这个

我保存选项并在单击时添加它们

我还简化了你的UL。如果你需要，你可以添加一个光标：指向它的指针

我没有隐藏选项，因为它是糟糕的支持

如何使用JavaScript隐藏选择选项？(跨浏览器)

const categoriesSelect = document.getElementById('item-categories')
const originalOptions = [...categoriesSelect.options].slice(0); // copy
document.getElementById('item-types').addEventListener('click', (e) => {
const tgt = e.target.closest("li");
if (tgt.classList.contains("item-type")) {
const selectType = tgt.dataset.typeId;
categoriesSelect.length=0; // remove all
originalOptions.filter(opt => opt.value == selectType).forEach(opt => categoriesSelect.append(opt))
}
categoriesSelect.selectedIndex = 0; // select the first
});

<ul id="item-types">
<li class="item-type" data-type-id="1">Type1</li>
<li class="item-type" data-type-id="2">Type2</li>
</ul>
<select id="item-categories">
<option value="1">category1</option>
<option value="1">category2</option>
<option value="1">category3</option>
<option value="2">category4</option>
<option value="2">category5</option>
</select>

Answer 2

您的问题似乎是，如果选项不符合搜索条件，您将完全删除这些选项，然后当您再次筛选时，您将从先前已筛选的选项中进行筛选。正因为如此，你得到了空数组。

相反，你需要想出一种方法来记住最初的选项，并始终从中筛选。例如，您可以将选项存储在一个变量中。或者简单地用CSS隐藏不匹配的部分，而不是完全删除它们。

Answer 3

const allCategoryOptionsStore = [...document.getElementById("item-categories").options];
// parent event listener
document.getElementById("types").addEventListener("click", handleOnClick);
function handleOnClick(e){
var tgt = e.target;
if (tgt.tagName.toUpperCase() == "DIV") {
const dataTypeId = tgt.parentElement.parentElement.getAttribute("data-type-id");
const selectCategories = document.getElementById("item-categories");
selectCategories.options.length = 0;
allCategoryOptionsStore.filter(opt => opt.value === dataTypeId).forEach(opt =>selectCategories.options.add(opt));
}
}

<ul id="types">
<li data-type-id="1">
<a>
<div>Type 1</div>
</a>
</li>
<li data-type-id="2">
<a>
<div>Type 2</div>
</a>
</li>
<li data-type-id="3">
<a>
<div>Type 3</div>
</a>
</li>
<li data-type-id="4">
<a>
<div>Type 4</div>
</a>
</li>
</ul>
<select id="item-categories">
<option value="1">category 1</option>
<option value="2">category 2</option>
<option value="2">category 2</option>
<option value="3">category 3</option>
<option value="3">category 3</option>
<option value="1">category 1</option>
<option value="4">category 4</option>
</select>