当给定一个数组(仅限纯Javascript)时，删除选择(多个)选项的最简单方法是什么

Question

好的，我得到了

<select id="selectUsers" multiple>
<option value="tom">Tom</option>
<option value="mary">Mary</option>
<option value="mike">Mike</option>
<option value="cake">Cake</option>
</select>

给定var removeArray=['mary','cake'];.

运行function remove()后，应该是

<select id="selectUsers" multiple>
<option value="tom">Tom</option>
<option value="mike">Mike</option>
</select>

当给定一个数组（仅限纯Javascript）时，删除选择（多个）选项的最简单方法是什么？

Answer 1

遍历数组中的元素并使用属性选择器以选择具有该特定value属性option元素：

var removeArray = ['mary', 'cake'];
var selectElement = document.getElementById('selectUsers');
removeArray.forEach(function(value) {
  var option = selectElement.querySelector('option[value="' + value + '"]');
  if (option) {
    selectElement.removeChild(option);
  }
});

<select id="selectUsers" multiple>
  <option value="tom">Tom</option>
  <option value="mary">Mary</option>
  <option value="mike">Mike</option>
  <option value="cake">Cake</option>
</select>

如果有多个元素具有相同的 value 属性，则需要使用 .querySelectorAll() 而不是 .querySelector() 并循环访问这些选项元素：

var removeArray = ['mary', 'cake'];
var selectElement = document.getElementById('selectUsers');
removeArray.forEach(function(value) {
  var options = selectElement.querySelectorAll('option[value="' + value + '"]');
  Array.prototype.forEach.call(options, function (option) {
    selectElement.removeChild(option);
  });
});

<select id="selectUsers" multiple>
  <option value="tom">Tom</option>
  <option value="mary">Mary</option>
  <option value="mike">Mike</option>
  <option value="cake">Cake</option>
  <option value="cake">Cake</option>
</select>

当然，您也可以采用相反的方法，遍历所有子元素option并根据 value 属性删除它们：

var removeArray = ['mary', 'cake'];
var selectElement = document.getElementById('selectUsers');
var options = selectElement.querySelectorAll('option');
Array.prototype.forEach.call(options, function(option) {
  if (removeArray.indexOf(option.value) > -1) {
    selectElement.removeChild(option);
  }
});

<select id="selectUsers" multiple>
  <option value="tom">Tom</option>
  <option value="mary">Mary</option>
  <option value="mike">Mike</option>
  <option value="cake">Cake</option>
  <option value="cake">Cake</option>
</select>