如何防止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>