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

Posted 2023-04-13

【中文标题】如何防止 Jquery 可排序连接列表中的重复条目？

【英文标题】：How to prevent duplicate entries in Jquery Sortable connection list?

【发布时间】：2013-03-03 18:23:08

【问题描述】：

我有两个 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;
        

如何避免重复值...请帮帮我..

提前谢谢..

【参考方案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>

【讨论】：

在此代码中 $("#sortable2> option").each(function() if(response.d[i] != this.value) 它检查第二个中的重复值列表

第一个下拉菜单中是否有可能出现重复值？

不...我有两个列表..第一个列表是独立的例如它只包含一些 5 个值..第二个列表从 ajax 加载它的值，其中将包含第一个中的 5 个值中的一些值列表..我会将附加值从第一个列表添加到第二个列表..如果我尝试添加已经由 ajax 加载的相同值，它应该会阻止我

您的解决方案将我的第二个列表作为空列表...我已经有一些值...我只是按照我之前的评论中的说明添加一些内容

你如何将值从第一个列表拖到第二个？