如何防止 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 列表是独立的，因此它的值被加载到 codebehind(pageload) 中，如下所示：

 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>