什麼是最簡單的方法來刪除選擇（多）給定一個數組（只有純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

遍歷數組中的元素，並且爲了使用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>