如何防止Jquery可排序连接列表中的重复条目？

Question

我有两个asp下拉列表..根据在两个下拉列表中选择的值，它会动态地生成两个无序列表，其中我已经实现了jquery可排序连接列表。第一个列表包含一些默认值..我需要拖动拖放所需的值以第二列表...应该防止添加重复的条目..

我粘贴下面我的代码...请检查并提供我一个解决方案：

这是ASPX代码为两个下拉列表：

<form id="form1" runat="server"> 

     Application <asp:DropDownList ID="ApplicationList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="FetchRoleFromApplication" > 
      </asp:DropDownList> 

     Role <asp:DropDownList ID="RoleName" runat="server" onchange="javascript:ShowSortable();" > 
     </asp:DropDownList> 

    <ul id="sortable1" class="connectedSortable" runat="server" style="display:none"> 

    </ul> 


    <ul id="sortable2" class="connectedSortable" style="display:none" runat="server" > 

    </ul> 
    </form> 

第一个ul列表因此它的值在代码隐藏（页面加载）加载这样是独立的：

HtmlGenericControl li; 
     JavaScriptSerializer objJSSerializer = new JavaScriptSerializer(); 
     foreach (FetchUserGroup_Result objectItem in Allusergroup) 
     { 
      li = new HtmlGenericControl("li"); 
      li.ID = objectItem.group_id.ToString(); 
      li.Attributes.Add("class", "ui-state-default"); 
      li.InnerText = objectItem.group_name; 

      sortable1.Controls.Add(li); 
     } 

第二UL列表值用AJAX调用这样加载...

function ShowSortable() { 

    $('#sortable1').show(); 


    var postJSONData = JSON.stringify({ ApplicationId: $('#applnhdnname').val(), RoleName: $('#RoleName').val() }); 
    $.ajax({ 
     type: 'POST', 
     data: postJSONData, 
     url: 'UserManagementService.svc/GetUserGroupsForApplicationRole', 

     dataType: 'json', 
     async: false, 
     contentType: 'application/json; charset=utf-8', 

     success: function success(response) { 

      $("#sortable2").append(response.d); 
      $('#sortable2').show(); 

     }, 
     error: SessionExpiryHandler 
    }); 
} 

相应的WCF服务是这样的：

[OperationContract] 
     [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)] 
     public string GetUserGroupsForApplicationRole(string ApplicationId, string RoleName) 
     { 

      User user = new User(); 
      JavaScriptSerializer objJSSerializer = new JavaScriptSerializer(); 
      List<GetUserGroupForApplicationRole_Result> usergroup; 
      usergroup = user.GetUserGroupForApplicationRole(ApplicationId, RoleName); 
      string sample = string.Empty; 

      foreach (GetUserGroupForApplicationRole_Result objectItem in usergroup) 
      { 

       sample += "<li id= "+objectItem.group_id+ " class='ui-state-highlight'>"; 
       sample += objectItem.group_name; 
       sample+="</li>"; 

      } 


      return sample; 
     } 

如何避免这种重复的值...请帮助我..

在此先感谢..

Answer 1

嗨改变你的JavaScript如下：

<script> 
    function ShowSortable() { 

     $('#sortable1').show(); 


     var postJSONData = JSON.stringify({ ApplicationId: $('#applnhdnname').val(), RoleName: $('#RoleName').val() }); 
     $.ajax({ 
      type: 'POST', 
      data: postJSONData, 
      url: 'UserManagementService.svc/GetUserGroupsForApplicationRole', 

      dataType: 'json', 
      async: false, 
      contentType: 'application/json; charset=utf-8', 

      success: function success(response) { 
       for(var i=0; i<response.d.length;i++) 
       { 

        var myOption = $("<option value= " + response.d[i] + "> " + response.d[i] + " </option>"); 
        if ($("#sortable2").length == 0) { 
         $("#sortable2").append(myOption); 

        } 
        $("#sortable2> option").each(function() { 

         if (response.d[i] != this.value) { 
          $("#sortable2").append(myOption); 

         } 


        }); 
       } 

       $('#sortable2').show(); 
      }, 
      error: SessionExpiryHandler 
     }); 
    } 

</script>