关于js select 上移,下移,置顶,置底

最新推荐文章于 2025-08-21 09:42:52 发布
原创 最新推荐文章于 2025-08-21 09:42:52 发布 · 3.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#button #测试 #generator #function #input #javascript

本文分享了一段JavaScript代码，用于实现select元素中选项的上移、下移、置顶和置底功能，已测试通过IE7.0和Firefox3.0。提供了完整的HTML和JS示例。

在网上搜索select排序功能代码, 有一大堆,可真正实现置顶功能的却很少,不是功能没有实现,就是速度奇慢无比,当然也可能是自己搜索能力没有过关,于是想到"求人不如己",自己奋笔直书,写完整的select排序功能,只对IE7.0和Firefox3.0进行测试通过!希望能给需要类似功能同仁提供一些帮助!

 

 

Html代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE> Select Demo </TITLE>  
  5. <META NAME="Generator" CONTENT="EditPlus">  
  6. <META NAME="Author" CONTENT="">  
  7. <META NAME="Keywords" CONTENT="">  
  8. <META NAME="Description" CONTENT="">  
  9. </HEAD>  
  10. <style>  
  11.     center   
  12.     {   
  13.         font-size:12px;   
  14.         color:red;   
  15.         font-weight:bold;   
  16.     }   
  17.     select   
  18.     {   
  19.         font-size:12px;   
  20.         color:green;   
  21.     }   
  22. </style>  
  23.   
  24. <BODY>  
  25.     <span id='feedback'></span>  
  26.        
  27.     <form method="post" name="myform">  
  28.   <table border="0" width="400">  
  29.  <tr>  
  30.   <td><CENTER>可选择排序方式</CENTER></td>  
  31.   <td> </td>  
  32.   <td><CENTER>已选择排序方式</CENTER></td>  
  33.  </tr>  
  34.     <tr>  
  35.       <td width="40%">  
  36.   <select  multiple name="left" id="left" size="8" style='width:200;'  
  37.   ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">  
  38.        <option value="20">测试数据一</option>  
  39.        <option value="30">测试数据二</option>  
  40.        <option value="40">测试数据三</option>  
  41.        <option value="50">测试数据四</option>  
  42.        <option value="60">测试数据五</option>  
  43.        <option value="70">测试数据六</option>     
  44.        <option value="80">测试数据七</option>  
  45.        <option value="90">测试数据八</option>     
  46.   </select>  
  47.    </td>  
  48.       <td width="20%" align="center">  
  49.   <input type="button" value=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>  
  50.   <input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))">  
  51.    </td>  
  52.       <td width="40%">  
  53.   <select  multiple name="right" id="right" size="8" style='width:200;'  
  54.   ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">  
  55.   </select>  
  56.    </td>  
  57.     </tr>  
  58.  <tr>  
  59.   <td colspan="3">  
  60.   <CENTER>  
  61.   <INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));">  
  62.   <INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));">  
  63.   <INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));">  
  64.   <INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right'));">  
  65.   </CENTER></td>  
  66.  </tr>  
  67.   </table>  
  68.        
  69.     
  70. </BODY>  
  71. </HTML>  
  72.   
  73.   
  74. <SCRIPT LANGUAGE="JavaScript">  
  75. <!--   
  76.     //上移   
  77. 　   function moveUp(obj)   
  78. 　　{　   
  79. 　　　　　　for(var i=1; i < obj.length; i++)   
  80. 　　　　　　{//最上面的一个不需要移动，所以直接从i=1开始   
  81. 　　　　　　　　if(obj.options[i].selected)   
  82. 　　　　　　　　{   
  83. 　　　　　　　　　　if(!obj.options.item(i-1).selected)   
  84. 　　　　　　　　　　{   
  85. 　　　　　　　　　　　　var selText = obj.options[i].text;   
  86. 　　　　　　　　　　　　var selValue = obj.options[i].value;   
  87.                         obj.options[i].text = obj.options[i-1].text;   
  88.                         obj.options[i].value = obj.options[i-1].value;   
  89.                         obj.options[i].selected = false;   
  90.                         obj.options[i-1].text = selText;   
  91.                         obj.options[i-1].value = selValue;   
  92.                         obj.options[i-1].selected=true;   
  93. 　　　　　　　　　　}   
  94. 　　　　　　　　}   
  95. 　　　　　　}   
  96. 　　　　}   
  97.   
  98.         //下移   
  99.         function moveDown(obj)   
  100. 　　　　{   
  101. 　　　　　　for(var i = obj.length -2 ; i >= 0; i--)   
  102. 　　　　　　{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始   
  103. 　　　　　　　　if(obj.options[i].selected)   
  104. 　　　　　　　　{   
  105. 　　　　　　　　　　if(!obj.options[i+1].selected)   
  106. 　　　　　　　　　　{   
  107. 　　　　　　　　　　　　var selText = obj.options[i].text;   
  108. 　　　　　　　　　　　　var selValue = obj.options[i].value;   
  109.             obj.options[i].text = obj.options[i+1].text;   
  110.             obj.options[i].value = obj.options[i+1].value;   
  111.            obj.options[i].selected = false;   
  112.           obj.options[i+1].text = selText;   
  113.           obj.options[i+1].value = selValue;   
  114.          obj.options[i+1].selected=true;   
  115. 　　　　　　　　　　}   
  116. 　　　　　　　　}   
  117. 　　　　　　}   
  118. 　　　　}   
  119.         //移动   
  120.         function moveOption(obj1, obj2)   
  121.         {   
  122.              for(var i = obj1.options.length - 1 ; i >= 0 ; i--)   
  123.              {   
  124.                  if(obj1.options[i].selected)   
  125.                  {   
  126.                     var opt = new Option(obj1.options[i].text,obj1.options[i].value);   
  127.                     opt.selected = true;   
  128.                     obj2.options.add(opt);   
  129.                     obj1.remove(i);   
  130.                 }   
  131.              }   
  132.         }   
  133.         //置顶   
  134.       function  moveTop(obj)    
  135.       {    
  136.             var  opts = [];    
  137.             for(var i =obj.options.length -1 ; i >= 0; i--)   
  138.             {   
  139.                 if(obj.options[i].selected)   
  140.                 {   
  141.                     opts.push(obj.options[i]);   
  142.                     obj.remove(i);   
  143.                 }   
  144.             }   
  145.             var index = 0 ;   
  146.             for(var t = opts.length-1 ; t>=0 ; t--)   
  147.             {   
  148.                 var opt = new Option(opts[t].text,opts[t].value);   
  149.                 opt.selected = true;   
  150.                 obj.options.add(opt, index++);   
  151.             }   
  152.         }    
  153.       //置底   
  154.       function  moveBottom(obj)    
  155.       {    
  156.             var  opts = [];    
  157.             for(var i =obj.options.length -1 ; i >= 0; i--)   
  158.             {   
  159.                 if(obj.options[i].selected)   
  160.                 {   
  161.                     opts.push(obj.options[i]);   
  162.                     obj.remove(i);   
  163.                 }   
  164.             }   
  165.              for(var t = opts.length-1 ; t>=0 ; t--)   
  166.             {   
  167.                 var opt = new Option(opts[t].text,opts[t].value);   
  168.                 opt.selected = true;   
  169.                 obj.options.add(opt);   
  170.             }   
  171.         }    
  172.   
  173.     //-->  
  174. </SCRIPT>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select Demo </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
	center
	{
		font-size:12px;
		color:red;
		font-weight:bold;
	}
	select
	{
		font-size:12px;
		color:green;
	}
</style>

<BODY>
	<span id='feedback'></span>
	
	<form method="post" name="myform">
  <table border="0" width="400">
 <tr>
  <td><CENTER>可选择排序方式</CENTER></td>
  <td> </td>
  <td><CENTER>已选择排序方式</CENTER></td>
 </tr>
    <tr>
      <td width="40%">
  <select  multiple name="left" id="left" size="8" style='width:200;'
  ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
	   <option value="20">测试数据一</option>
	   <option value="30">测试数据二</option>
	   <option value="40">测试数据三</option>
	   <option value="50">测试数据四</option>
	   <option value="60">测试数据五</option>
	   <option value="70">测试数据六</option>  
	   <option value="80">测试数据七</option>
	   <option value="90">测试数据八</option>  
  </select>
   </td>
      <td width="20%" align="center">
  <input type="button" value=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>
  <input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
   </td>
      <td width="40%">
  <select  multiple name="right" id="right" size="8" style='width:200;'
  ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
  </select>
   </td>
    </tr>
 <tr>
  <td colspan="3">
  <CENTER>
  <INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));">
  <INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));">
  <INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));">
  <INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right'));">
  </CENTER></td>
 </tr>
  </table>
	
 
</BODY>
</HTML>


<SCRIPT LANGUAGE="JavaScript">
<!--
	//上移
　	function moveUp(obj)
　　{　
　　　　　　for(var i=1; i < obj.length; i++)
　　　　　　{//最上面的一个不需要移动，所以直接从i=1开始
　　　　　　　　if(obj.options[i].selected)
　　　　　　　　{
　　　　　　　　　　if(!obj.options.item(i-1).selected)
　　　　　　　　　　{
　　　　　　　　　　　　var selText = obj.options[i].text;
　　　　　　　　　　　　var selValue = obj.options[i].value;
						obj.options[i].text = obj.options[i-1].text;
						obj.options[i].value = obj.options[i-1].value;
						obj.options[i].selected = false;
						obj.options[i-1].text = selText;
						obj.options[i-1].value = selValue;
						obj.options[i-1].selected=true;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}

		//下移
		function moveDown(obj)
　　　　{
　　　　　　for(var i = obj.length -2 ; i >= 0; i--)
　　　　　　{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始
　　　　　　　　if(obj.options[i].selected)
　　　　　　　　{
　　　　　　　　　　if(!obj.options[i+1].selected)
　　　　　　　　　　{
　　　　　　　　　　　　var selText = obj.options[i].text;
　　　　　　　　　　　　var selValue = obj.options[i].value;
		    obj.options[i].text = obj.options[i+1].text;
		    obj.options[i].value = obj.options[i+1].value;
		   obj.options[i].selected = false;
		  obj.options[i+1].text = selText;
		  obj.options[i+1].value = selValue;
		 obj.options[i+1].selected=true;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
		//移动
		function moveOption(obj1, obj2)
		{
			 for(var i = obj1.options.length - 1 ; i >= 0 ; i--)
			 {
				 if(obj1.options[i].selected)
				 {
					var opt = new Option(obj1.options[i].text,obj1.options[i].value);
					opt.selected = true;
					obj2.options.add(opt);
					obj1.remove(i);
				}
			 }
		}
		//置顶
	  function  moveTop(obj) 
	  { 
			var  opts = []; 
			for(var i =obj.options.length -1 ; i >= 0; i--)
			{
				if(obj.options[i].selected)
				{
					opts.push(obj.options[i]);
					obj.remove(i);
				}
			}
			var index = 0 ;
			for(var t = opts.length-1 ; t>=0 ; t--)
			{
				var opt = new Option(opts[t].text,opts[t].value);
				opt.selected = true;
				obj.options.add(opt, index++);
			}
		} 
	  //置底
	  function  moveBottom(obj) 
	  { 
			var  opts = []; 
			for(var i =obj.options.length -1 ; i >= 0; i--)
			{
				if(obj.options[i].selected)
				{
					opts.push(obj.options[i]);
					obj.remove(i);
				}
			}
			 for(var t = opts.length-1 ; t>=0 ; t--)
			{
				var opt = new Option(opts[t].text,opts[t].value);
				opt.selected = true;
				obj.options.add(opt);
			}
		} 

	//-->
</SCRIPT>

 

PHP 实现上移下移置顶功能
weishuo110的博客
05-16 2713
1.数据库：idint(11)  否无sortint(11)  否1排序topint(1)  否1是否置顶 1为不置顶，2为置顶2.视图：sortint(11)  否1排序&lt;div class="layui-form news_list"&gt; &lt;table class="layui-table" lay-filter="test" &gt; ...
前端基于VUE+ElementUI实现table行上移或下移(支持跨页移动)
01-30 1979
table列表需要支持上下移动数据，并且也需要满足跨页移动。
jQuery Select 上移下移
07-03
Select上移下移 jQuerySelect jQuerySelect移动 Select上下移动
jquery select 上移下移
coolybq的专栏
12-03 547
源码：-->    >  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  title>MultiSelects(左右选框) 完美版title>  script src="http://demo.deeka
select 上移下移删除以及模态对话框
马辉的专栏
12-14 1518
 html xmlns="http://www.w3.org/1999/xhtml" >head>    title>4.1对话框title>script language="javascript" type="text/javascript">...// function Button3_onclick() ...{//下移Select1.options.insertBefore(Sel
javascript操作html中select的上下移动
青青子衿
03-21 359
手写getSelectItem、getSelectItemIndex方法  function setToFirst(list){                   var obj=getSelectItem(list);              var index=getSelectItemIndex(list);        if(index==0){return;}        ...
网页左右栏目动态移动交互功能实现
左右两侧各配备若干按钮，如“→”、“←”、“>>”、“”、“↑”、“↓”、“”、“”，分别对应单个移动、全部移动、上移、下移、置顶、置底等功能。这些按钮通过`<button>`标签实现，并绑定相应的JavaScript事件...
OpenLayers教程15_图层堆栈管理
w131552的博客
11-21 1287
openlayer调整图层
附加上下移动的vue穿梭框实现
g1437353759的博客
01-26 1141
功能需求： 1、左侧的子节点移动到右侧的表格中 2、右侧选中的内容移动到左侧树中，单一移动和全部移动 3、点击右侧节点实现上下移动 首先会遇到的问题可能是如何实现左侧只让子节点显示checkbox,我这边是根据后端返回了一个参数来判断是否是父节点（其实只要后端给父节点加一个nocheck=true就可以） if (res.data.code == 0) { let { data } = res.data; data.forEach((item) => { i.
JS实现一个列表中包含上移下移删除等功能
10-25
一个项目，包括了一个列表页其中包括在列表中实现上移，下移，删除等功能，为了用户体验，操作均使用JS实现
JS技术实现动态置顶、置底、上移、下移
08-07
使用JS技术实现数据行的动态置顶、置底、上移、下移
js表格行上移下移置顶置底
12-19
支持所有浏览器，包过IE6-8,支持多选行操作，支持不连续选择行表格操作，操作按钮单独分开的。
select 上移,下移,置顶,置底
xushichang的专栏
07-14 2626
Html代码 可选择排序方式 已选择排序方式测试数据一测试数据二测试数据三测试数据四测试数据五测试数据六测试数据七测试数据八
JavaScript实现Select元素Options排序的教程
最新发布
weixin_28895791的博客
08-21 694
在Web开发中，HTML的<select>元素用于创建下拉列表，而<option>元素则定义了列表中的每一个选项。通过结合使用这两个元素，开发者可以为用户提供一个清晰直观的界面，让他们在多个选项中进行选择。虽然这些元素在用户界面上看起来简单，但在前端开发中，合理地操纵<select>和<option>元素可以提升用户体验，优化数据处理流程，并且在动态页面中实现复杂的交互逻辑。作为基础元素，<select>支持multiple属性，允许用户一次选择多个选项。而。
js如何实现列表数据的上移和下移？以及置顶、置底功能
weixin_52099241的博客
06-21 4188
首先，调用list.splice(index - 1, 1, list[index])方法，这个方法会从list数组中删除第index-1个元素，并用第index个元素替换它。这个方法的作用是将list数组中的第index个元素和第index-1个元素交换位置，也就是将第index个元素上移一位。这个方法的作用是将list数组中的第index个元素和第index+1个元素交换位置，也就是将第index个元素下移一位。使用splice方法实现下移的原理和上移类似，只是要将当前位置的元素和下一位的元素交换。
【JavaScript】 ---- 数组元素的上移、下移、置顶
止于至善
08-16 2882
1. 上移或者下移都是使用 temp 变量获取当前位置的元素； 2. 当前位置获取需要移动方向位置的元素【前一个或者后一个位置的元素】； 3. 移动方向位置获取 temp 变量的值，完成元素的替换； 4. 置顶采用变量 temp 获取当前位置元素，other 获取其他位置元素值； 5. 将 temp 和 other 拼接，这里可以使用 unshift, concat等实现。
使用js实现数组上移和下移，交换位置以及将目标元素移动到指定位置， 其余元素不变
weixin_50236973的博客
06-13 2551
【代码】使用js实现数组上移和下移。
js简单实现数据上移、下移、置顶、置底
大把小米的博客
06-16 4071
如图，要实现这种效果可以使用js的数组api 1.上移 upGo(fieldData, index) { if (index != 0) { fieldData[index] = fieldData.splice(index - 1, 1, fieldData[index])[0]; } else { fieldData.push(fieldData.shift()); } }, ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值