使用 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

没有 jQuery 的现代 JS 解决方案：

const options = []

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