jquery 实现从左边listbox选择至右边listbox

经常在项目中会用到从左边文本框选择数据至右边文本框，现将关键jquery 代码 与各位分享

 

 

/* source*/
            $("#source li").each(function() {
                $(this).append("<img src=\"../Images/target_flg.png\" class=\"imgstyle\" />");
                $("#source li img").show();

            });

            $("#source li").unbind("click").bind("click", function() {
                $(this).toggleClass("selectItem");
                if ($(this).attr("class") == "selectItem") {
                    $(this).find("img").hide();
                }
                else {
                    $(this).find("img").show();
                }
            });

            $("#source li img").mousemove(function() {
                $(this).css("cursor", "pointer");
                $("#lifeEventToolTips").css({ top: $(this).offset().top + 5, left: $(this).offset().left + 5 });
                $("#lifeEventToolTips").html($(this).parent().attr("tips"));
                $("#lifeEventToolTips").show();
            });

            $("#source li img").mouseout(function() {
                $("#lifeEventToolTips").hide();
            });

            /*target*/
            $("#target li").each(function() {
                $(this).append("<img src=\"../Images/target_flg.png\" class=\"imgstyle\" />");
                $("#target li img").hide();
            });

            $("#target li").unbind("click").bind("click", function() {
                $(this).toggleClass("selectItem");
            });

            $("#target li img").mousemove(function() {
                $("#lifeEventToolTips").css({ top: $(this).offset().top, left: $(this).offset().left });
                $("#lifeEventToolTips").html($(this).parent().attr("tips"));
                $("#lifeEventToolTips").show();
            });

            $("#target li img").mouseout(function() {
                $("#lifeEventToolTips").hide();
            });

            //btnEvent
            $("#add").click(function() {
                $("#target li").removeClass();
                $("#source li.selectItem").appendTo("#target");
                $("#target li img").hide();
                $("#target li").unbind("click").bind("click", function() {
                    $(this).toggleClass("selectItem");
                });
                GetGroups();
            });

            $("#remove").click(function() {
                $("#source li").removeClass();
                $("#source li img").show();
                $("#target li.selectItem").appendTo("#source");
                $("#source li").unbind("click").bind("click", function() {
                    $(this).toggleClass("selectItem");
                    if ($(this).attr("class") == "selectItem") {
                        $(this).find("img").hide();
                    }
                    else {
                        $(this).find("img").show();
                    }
                });
                GetGroups();
            });

html

 

<table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="padding-top: 30px; width: 40%;">
                            <span class="targetspanstyle">Available Groups</span>
                            <div class="divborderstyle">
                                <ul id="source">
                                    <asp:Repeater ID="repSourceLifeEvent" runat="server">
                                        <ItemTemplate>
                                            <li id="<%#Eval("typeName") %>" tips=" <%#Eval("KeyWord") %>">
                                                <%#Eval("Description") %></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <div id="lifeEventToolTips" style="">
                            </div>
                        </td>
                        <td style="padding-top: 30px; width: 20%;">
                            <div style="margin-bottom: 10px;">
                                <img id="add" src="../images/btn_add.gif" alt="add" style="cursor: hand" /></div>
                            <div>
                                <img id="remove" src="../images/btn_remove.gif" alt="remove" style="cursor: hand" /></div>
                        </td>
                        <td style="padding-top: 30px; width: 40%;">
                            <span class="targetspanstyle">Target Groups</span>
                            <div class="divborderstyle">
                                <ul id="target">
                                    <asp:Repeater ID="repTargetLifeEvent" runat="server">
                                        <ItemTemplate>
                                            <li id="<%#Eval("typeName") %>" tips=" <%#Eval("KeyWord") %>">
                                                <%#Eval("Description") %></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>

两边待选项可以后台绑定