模拟选择项左边移动到右边的功能
来源：互联网 发布：华腾软件怎么样 编辑：程序博客网 时间：2024/05/17 06:26
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>模拟选择项左边移动到右边的功能</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><style> .li_select_color { background: #666; } .move { height: 230px; } .move .moveL, .move .moveM, .move .moveR { float: left; } .move .moveM { margin: 0 10px; padding-top: 80px; } .move .select_box { border: 1px solid #bcbcbc; height: 155px; width: 250px!important; overflow-y: auto; margin: 0; } .move .select_box li{ padding-top:2px; padding-bottom:2px; cursor : pointer; list-style : none; margin-left : -40px; }</style></head><body><div class="move"> <div class="moveL"> <div>未选择项</div> <ul class="select_box"> <li value="1"><span>选项1</span></li> <li value="2"><span>选项2</span></li> <li value="3"><span>选项3</span></li> <li value="4"><span>选项4</span></li> <li value="5"><span>选项5</span></li> </ul> <input type="button" value="移入所有>>" id="selectAll"> </div> <div class="moveM"> <input type="button" value=">>" id="select"> <br> <input type="button" value="<<" id="unSelect"> </div> <div class="moveR"> <div>已选择项</div> <ul class="select_box"> </ul> <input type="button" value="<<移出所有" id="unSelectAll"> </div> <div></div></div><script type="text/javascript"><!--点击移入按钮-->$("#select").click(function(){ $(".moveL .select_box li").each(function(){ if($(this).hasClass("li_select_color")){ $(".moveR .select_box").append($(this)); $(this).removeClass("li_select_color"); } });});<!--点击移出按钮-->$("#unSelect").click(function(){ $(".moveR .select_box li").each(function(){ if($(this).hasClass("li_select_color")){ $(".moveL .select_box").append($(this)); $(this).removeClass("li_select_color"); } });});<!--点击移入所有按钮-->$("#selectAll").click(function(){ $(".moveL .select_box li").each(function(){ $(".moveR .select_box").append($(this)); $(this).removeClass("li_select_color"); });});<!--点击移出所有按钮-->$("#unSelectAll").click(function(){ $(".moveR .select_box li").each(function(){ $(".moveL .select_box").append($(this)); $(this).removeClass("li_select_color"); });});<!--点击选择项-->$(".select_box li span").click(function () { if ($(this).parent().hasClass("li_select_color")) { $(this).parent().removeClass("li_select_color"); } else { $(this).parent().addClass("li_select_color"); }});</script></body></html>
