0

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"]

上記のリストに含まれる内部の html値を持たないoptionすべての要素を(jQuery を使用して) DOM から削除するにはどうすればよいですか? たとえば、上記の内部 html 値のリスト ( ) から、 and要素のみを削除して、最終的な要素が次のようになるようにします。["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>
4

2 に答える 2

7

これを試して：

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
});

デモ

参照

一方、 $.inArray の代わりに、ecmascript-5 仕様のArray.prototype.indexOfを使用することもできます

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

于 2013-06-14T02:42:18.543 に答える
2

もう 1 つの方法は、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 を使用しています (配列よりも常に高速であるため、これをお勧めします)。それでも配列を使用したい場合は、JSON リストを配列リスト (つまりvar list = ["Simon", "Alex"];) に置き換えるだけで、同じ結果が得られます。

于 2013-06-14T03:06:45.933 に答える