模拟选择项左边移动到右边的功能
2013-04-22 15:06
676 查看
<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>
相关文章推荐
- JS从左边移动到右边
- JS动态的把左边列表添加到右边的实现代码(可上下移动)
- HDB V1.0.0 内存数据引擎Win平台测试数据_模拟移动电信话费计费功能
- ubuntu 10.04将标题按钮从左边移动到右边
- 利用键盘上的上下左右(回车)键模拟出tab 键的功能上下左右移动焦点
- Javascript 利用键盘上的上下左右(回车)键模拟出tab 键的功能上下左右移动焦点
- 直方图内最大矩形 DP 固定左边(遍历可固定),移动右边(便历移动),调整最大面积
- 移动web——左边定宽右边自适应的布局(经典布局)写法
- 选择左边多选框的值移动到右边多选框
- 操作TreeView:,选中左边树的节点,点击>>按钮 将选择的节点展现到右边的树中,同时将选择的节点从左边的树中移除。。点击<<实现同样的功能。。。。
- select标签左边集合和右边集合 ,添加,移除, 多选添加,移除功能
- js动态的把左边列表添加到右边,可上下移动。
- 左边下拉框点击后选项移动到右边下拉框
- 对于一个字符串,设计一个算法,将包括i位置在内的左侧部分移动到右边,将右侧部分移动到左边。给定字符串A和它的长度n以及特点位置p,请返回旋转后的结果。
- 利用键盘上的上下左右(回车)键模拟出tab 键的功能上下左右移动焦点
- 选择左边多选框的值移动到右边多选框
- JS实现左边列表移到到右边列表功能
- JS特效,将左边项移动到右边
- 利用键盘上的上下左右(回车)键模拟出tab 键的功能上下左右移动焦点
- 选择左边多选框的值移动到右边多选框