jquery实现从左边列表框选择至右边listbo

x经常在项目中会用到从左边文本框选择数据至右边文本框，现将关键jquery代码与各位分享/*source*/$('#sourceli ').each(function(){$(this).append('imgsrc=\ '/Images/target _ flgpng \ ' class=\ ' img style \ '/')；$('#sourceliimg ').show()；});$('#sourceli ').解除绑定('点击')。bind('click 'function(){$(this).切换类(' selectItem ')；如果($(这个)。attr(' class ')==' selectItem '){ $(this).查找(' img ').hide()；}else{$(这个)。查找(' img ').show()；铌

sp;      }
            });

            $("#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

 

两边待选项可以后台绑定