时间戳

首页 > 解决方案 > 使用纯 JavaScript 删除不包含在数组中的值的选项

javascript - 使用纯 JavaScript 删除不包含在数组中的值的选项

问题描述

我需要从下拉列表中删除未包含在数组中的选项。这是我尝试过的：

var states_served = ["Connecticut", "Delaware", "Maine", "Maryland", "Massachusetts", "New Hampshire", "New Jersey", "New York", "North Carolina", "Pennsylvania", "Rhode Island", "Vermont", "Virginia", "West Virginia"];

var statesDD = document.querySelector('select[title="State"]');

 for (i = 0; i < statesDD.options.length; i++) {
  console.log(states_served.includes(statesDD.options[i].value)); //Correctly finds false and true options
     if (states_served.includes(statesDD.options[i].value) === false) {
       statesDD.remove(i);
       }

     }

如果我尝试相反的if (states_served.includes(statesDD.options[i].value))，只是为了测试， t 删除那些是true，但我需要删除那些是false。我也试过：

if (states_served.includes(statesDD.options[i].value) == false)...
if (states_served.includes(statesDD.options[i].value) !== true)...
if (!states_served.includes(statesDD.options[i].value))...

我究竟做错了什么？谢谢。

标签： javascriptarraysdrop-down-menu

解决方案

我相信您当前的问题是，当您根据它们的初始位置删除数组元素时i，您没有考虑到要从数组中删除它们的事实。因此，i不会是相对于最终数组的正确迭代器。

避免这种情况的一种方法是Array.filter避免自己管理索引：

var statesDD = document.querySelector('select[title="State"]')
  .filter((state) => !(states_served.includes(state.options[i].value)));

推荐阅读