從選擇框

我將如何，使用jQuery刪除重複項，刪除複本從選擇框

 <option value="English">English</option> 
     <option value="English">English</option> 
     <option value="English">English</option> 
     <option value="Geology">Geology</option> 
     <option value="Geology">Geology</option> 
     <option value="Information Technology">Information Technology</option> 
     <option value="Music">Music</option> 
     <option value="Music">Music</option> 
     <option value="Zoology">Zoology</option>

來源

2010-07-12 foradream

你可以這樣說：

var found = []; 
$("select option").each(function() { 
    if($.inArray(this.value, found) != -1) $(this).remove(); 
    found.push(this.value); 
});

Give it a try here，這是一個簡單的辦法，我們」如果我們還沒有找到該值，將它添加到數組（.push()），如果我們已經找到了的值，那麼這個是我們之前發現的一個騙局，.remove()它。

這隻能抓取<select>一次，最小化DOM遍歷，這是一個lot比數組操作更昂貴。此外，我們正在使用$.inArray()，而不是.indexOf()所以這在IE中正常工作。

如果你想有一個效率較低，但更短的解決方案（僅僅是一個例子，使用第一種方法！）：

$('select option').each(function() { 
    $(this).prevAll('option[value="' + this.value + '"]').remove(); 
});

You can test it here，這消除了與相同值的所有兄弟姐妹，但它更比第一種方法昂貴（DOM Traversal是昂貴的，並且多個選擇器引擎在這裏調用，更多）。我們使用的是.prevAll()，因爲您不能在.each()中刪除.siblings()，因爲它會預計下一個孩子，所以會在循環中導致一些錯誤。

來源

2010-07-12 10:54:34

評論幫助像我這樣的新秀。如果您使用jQuery noconflict，請確保將所有$替換爲您選擇的任何內容。將爲您節省大量的時間調試。 :) - http://api.jquery.com/jquery.noconflict/ – 2014-08-13 23:26:53

@JoshuaDance你也可以將所有這些放在一個函數中，其中'$'是jQuery裏面簡化的東西，就像這樣：'（function（$） {... code ...}）（jQuery）;'（或其他不是'jQuery'的東西）。這意味着無論你選擇哪一個地方，都不要修改你想要使用的任何代碼或插件。 – 2014-08-14 13:33:10

此方法將停止頁面上** ALL **選擇中的重複項。例如，如果您有多個yes/no選擇，則只有第一個選項會有選項。複製你的小提琴中的選擇和測試。所以沒有選項會多次出現在頁面上。 h（ – 2016-12-17 03:34:16

是我腦子裏浮現的最簡單方法是使用兄弟姐妹

$("select>option").each(function(){ 

var $option = $(this); 

$option.siblings() 
     .filter(function(){ return $(this).val() == $option.val() }) 
     .remove() 


})

來源

2010-07-12 10:55:27 jantimon

從我的頭頂，未經測試：

$('#mySelect option').each(function(){ 
    if ($('#mySelect option[value="'+$(this).val()+'"]').length) $(this).remove(); 
});

來源

2010-07-12 10:55:48

它是一個好方法，但在你的問題中添加「...長度> 1」 – 2014-10-19 16:25:50

下面的代碼嘗試使用刪除重複的選項：

$("#color option").val(function(idx, val) { 
 
    $(this).siblings("[value='"+ val +"']").remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class ="select-form" name="color" id="color"> 
 
    <option value="">Select Color</option> 
 
    <option value="1">Color 1</option> 
 
    <option value="2">Color 2</option> 
 
    <option value="3">Color 3</option> 
 
    <option value="3">Color 3</option> <!-- will be removed since value is duplicate --> 
 
    <option value="2">Color 2</option> <!-- will be removed since value is duplicate --> 
 
</select>

來源

2017-08-02 04:14:23

回答

相關問題