使用javascript或jquery從選擇下拉列表中刪除重復項

Question

我有一個選擇下拉字段，它是根據位置從數據庫動態創建的。 由於創建它的方式，導致下拉列表中列出了重復的位置。

<label for="club_feed_town">Location:</label>
<select id="locationList" name="club_feed_town">
    <option value="">All Locations</option>
    <option value="Andover">Andover</option>
    <option value="Andover">Andover</option>
    <option value="Bishops waltham">Bishops waltham</option>
    <option value="Blandford forum">Blandford forum</option>
    <option value="Boscombe">Boscombe</option>
    <option value="Bournemouth">Bournemouth</option>
    <option value="Bournemouth">Bournemouth</option>
    <option value="Etc">Etc</option>
</select>

有沒有人知道是否有辦法在頁面上使用一些代碼來檢查重復項的下拉列表並從菜單中刪除任何重復項？

提前致謝，

湯姆

Answer 1

使用jQuery和臨時數組來存儲值（或文本）足夠簡單

以下假定值重復

var optionValues =[];
$('#selectID option').each(function(){
   if($.inArray(this.value, optionValues) >-1){
      $(this).remove()
   }else{
      optionValues.push(this.value);
   }
});

DEMO

Answer 2

如果您可以編輯查詢，請在查詢中使用DISTINCT關鍵字到db，這樣它就不會重復相同的位置。

Answer 3

我以為你想要這樣的東西。

  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <select id="select_id">
        <option>abc</option>
        <option>abc</option>
        <option>bcd</option>
        <option>xyz</option>
        <option>bcd</option>
        <option>xyz</option>
    </select>
    <script type="text/javascript">
    var opt = {};
    $("#select_id > option").each(function () {
        if(opt[$(this).text()]) {
            $(this).remove();
        } else {
            opt[$(this).text()] = $(this).val();
        }
    });

    </script>

Answer 4

如果訂單不重要，您可以嘗試這個jQuery代碼段

$("form select option").each(function(){
    var value = $(this).val();
    var elems = $("form option[value="+value+"]");
    if (elems.length > 1) {
        elems.remove();
        $("form select").append("<option value="+value+">"+value+"</option>");
    }
});

Answer 5

沒有jQuery的現代JS解決方案：

const options = []

document.querySelectorAll('#locationList > option').forEach((option) => {
    if (options.includes(option.value)) option.remove()
    else options.push(option.value)
})

Answer 6

通常問題不是在客戶端，而是在數據庫端，如果選擇不是acurated，則不值得清理選擇。

Select DISTINCT(var) from X; 

應該比JavaScript中的新“功能”更好用