给定数组时，删除select（multiple）选项的最简单方法是什么（仅限纯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>

给定数组时，删除select（multiple）选项的最简单方法是什么（仅限纯Javascript）？

Answer 1

迭代数组中的元素并使用attribute selector以选择具有该特定option属性的value元素：

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>