Question

假设我有一个Select元素：

<select>
    <option value="Name 1">Simon</option>
    <option value="Name 2">Frank</option>
    <option value="Name 3">Bob</option>
    <option value="Name 4">Alex</option>
</select>

我有一个字符串数组，假设：

["Simon", "Alex"]

如何从DOM中删除（使用jQuery）不的每个option元素都包含在上面列表中的内部html 值？例如，给定上面的内部html值列表（["Simon", "Alex"]），我只想删除<option value="Name 2">Frank</option>和<option value="Name 3">Bob</option>元素，以便最终的select元素看起来像：

<select>
    <option value="Name 1">Simon</option>
    <option value="Name 4">Alex</option>
</select>

Answer 1

试试这个：

var list = ["Simon", "Alex"]; // Say your list is this

$(function(){

    $('select option').filter(function () { //Use filter on options
       return $.inArray(this.innerHTML, list) == -1 // get the option text which is not in the array
    }).remove(); //Remove them
});

Demo

参见

与此同时，您还可以使用ecmascript-5 spec Array.prototype.indexOf来代替$ .inArray

return list.indexOf(this.innerHTML) == -1

Answer 2

另一种方法是清除Select并使用数组或JSON格式的数据结构重新填充它：

// JSON formatted data structure
list = { "1": "Simon", "2" : "Alex" };

// Removes all options for the select box
$('select option').remove();

// Add option to the select box from list
$.each(list, function(key, value) {   
     $('select')
         .append($("<option></option>")
         .attr("value",key)
         .text(value)); 
});

上面的例子是使用JSON fromat（我推荐它，因为它总是比Arrays快）。如果您仍想使用Array，只需将JSON列表替换为数组列表（即var list = ["Simon", "Alex"];），您将获得相同的结果。

使用jQuery从select中删除选项

2 个答案:

Demo