原创

jquery 控制 multiple select 所有选择 且 排序

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://it007.blog.csdn.net/article/details/9284005

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
	
$(function() {
	$("#add").click(function(){
		$("#first option:selected").appendTo($("#second"));
	});
	$("#add_all").click(function() {
		$("#first option").appendTo($("#second"));
	});
	$("#first").dblclick(function(){
		$("#first option:selected").appendTo($("#second"));
	});
	$("#remove").click(function() {
		$("#second option:selected").appendTo($("#first"));
	});
	$("#remove_all").click(function() {
		$("#second option").appendTo($("#first"));
	});
	$("#moveUpButton").click(function(){
		var count = $("#second option:selected").length;//选中的个数
		if($("#second option:selected:eq(0)").index()!=0){
			for(var i = 0;i < count; i ++){
				var selectObj = $("#second option:selected:eq("+i+")");
				selectObj.prev().before(selectObj);
			}
		}
	});
	$("#moveDownButton").click(function(){
		var count = $("#second option:selected").length;//选中的个数
		if($("#second option:selected:eq("+(count-1)+")").index()!=($("#second option").length-1)){
			for(var i = 0;i < count; i ++){
				var selectObj = $("#second option:selected:eq("+(count-i-1)+")");
				selectObj.next().after(selectObj);
			}
		}
	});
});
  
</script>
 </head>
 <body>
  <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126" style="text-align: center;">
		待选择列表  
	</td>
    <td width="69" valign="middle"></td>
    <td width="127" align="left" style="text-align: center;">
		已选择列表
	</td>
  </tr>
  <tr>
    <td width="126" style="text-align: center;">
    	<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
		<select name="first" size="10" multiple="multiple" class="td3" id="first" style="width: 100px;">
		  <option value="选项1">选项1</option>
		  <option value="选项2">选项2</option>
		  <option value="选项3">选项3</option>
		  <option value="选项4">选项4</option>
		  <option value="选项5">选项5</option>
		  
		</select>    
	</td>
    <td width="69" valign="middle" style="text-align: center;">
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="<--" />
	   <input name="remove_all"  id="remove_all" type="button" class="button" value="<==" />
        </td>
    <td width="127" align="left" style="text-align: center;">
	  <select name="second" size="10" multiple="multiple" class="td3" id="second" style="width: 100px;">
		<option value="选项6">选项6</option>
		<option value="选项7">选项7</option>
		<option value="选项8">选项8</option>
        <option value="选项9">选项9</option>
      </select>
	</td>
  </tr>
  <tr>
    <td width="126" style="text-align: center;">
	</td>
    <td width="69" valign="middle"></td>
    <td width="127" align="left" style="text-align: center;">
		<input type="button" value="上移" id="moveUpButton"/>
		<input type="button" value="下移" id="moveDownButton"/>
	</td>
  </tr>
</table>
 </body>
</html>


 

文章最后发布于: 2013-07-09 17:46:39
展开阅读全文
0 个人打赏
私信求帮助

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览