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

通常问题不在客户端，而在数据库端如果选择不合适并不值得清理选择。

Select DISTINCT(var) from X;

应该比新的＆＃34;功能更好地工作＆＃34;在JavaScript中

使用javascript或jquery从选择下拉列表中删除重复项

6 个答案: