如何避免jquery中下拉数组中的重复选项答案

【问题标题】：how to avoid duplicate options from dropdown array in jquery如何避免jquery中下拉数组中的重复选项
【发布时间】：2015-12-21 03:41:03
【问题描述】：

在每个 buttonClick 上，我正在创建一个新的下拉列表，其中选项是动态填充的。由于下拉列表是动态填充的，因此我会在下拉列表中附加重复的选项。由于每次使用按钮单击创建新的下拉列表时下拉名称都是一个数组，因此相同的选项会重复添加到现有的下拉列表中。如何避免附加此重复选项。这是我的html代码

<Select name=test[]>
  <option value="">--Please Select--</option>
  <option value="a">Test Value1</option>
</select>

<Select name=test[]>
  <option value="">--Please Select--</option>
  <option value="a">Test Value2</option>
</select>

<Select name=test[]>
  <option value="">--Please Select--</option>
  <option value="a">Test Value3</option>
</select>

$.each(data, function(index, testcd) {
    $("select[name*='test']").append(new Option(testcd.TestName,testcd.Testid));

                        });

由于选择的名称相同，当在按钮单击期间添加新的下拉菜单时，第一个下拉菜单的选项会添加两次。在选择数组的情况下如何避免添加选项重复

【问题讨论】：

你应该有一些独特的东西来识别每个下拉菜单。

标签： jquery

【解决方案1】：

当你建立你的下拉菜单时，给你的下拉菜单一个唯一的 ID，当你需要向它加载数据时，为你的 jQuery 选择器使用这个唯一的 ID。

<Select id="dropddown1" name="test[]">
  <option value="">--Please Select--</option>
  <option value="a">Test Value1</option>
</select>

和

$.each(data, function(index, testcd) {
    $("#dropddown1").append(new Option(testcd.TestName,testcd.Testid));
});

或者，如果您正在构建下拉列表并向其加载数据，您可以使用已创建下拉列表的 jQuery 对象并仅向其中添加数据。

$(function(){

  $("#create").click(function(e){

    var d=$("<select name='test'><select>");       
    $("body").append(d);  
    // d id the jQuery object for the new dropdown
    loadDataToDropDown(d);      
  });      

});

function loadDataToDropDown(d)
{
  var items= [{TestName:"First",Testid:123},
         {TestName:"Second",Testid:123}];
  //items could be data coming from an ajax call
  $.each(items,function(a,item){
     d.append("<option value='"+item.Testid+"'>"+item.TestName+"</option>");
  });

}

Here 是一个示例

【讨论】：

【解决方案2】：

您需要先清除所有选项以防止重复问题。将您的代码更新为：

$("select[name*='test']")
    .empty()
    .append(new Option(testcd.TestName,testcd.Testid));
});

【讨论】：

【解决方案3】：

尝试以下解决方案。

您只需要在下面的示例中添加或修改类

$(document).ready(function () {
      $(document).find('select').change(function () {
        if ($(document).find('select option[value="' + $(this).val() + '"]:selected').length > 1) {
          $(this).val('').change();
          alert('Already selected values')
        }
      });
    });

【讨论】：