列表框的左右上下移动

最新推荐文章于 2023-06-21 17:08:56 发布

qjyong

最新推荐文章于 2023-06-21 17:08:56 发布

阅读量3.2k

点赞数

分类专栏： JavaScript 文章标签： button function html javascript action object

本文链接：https://blog.csdn.net/qjyong/article/details/2576248

版权

JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

效果：

HTML页面代码：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

	<head>

		<title>js操作列表框</title>

	</head>

	<script language="javascript">

	<!--

	var ListUtil = new Object();

	//全部移动

	ListUtil.moveAll = function moveAll(oListboxFrom,oListboxTo){

		var options = oListboxFrom.options;

		for(var i = 0; i < options.length; i++){

			oListboxTo.appendChild(options[i]); //???

			i -= 1;  //???每删除一个选项后，每个选项的index会被重置

		}

	}

	//单个或多个移动

	ListUtil.moveMuti = function moveMuti(oListboxFrom,oListboxTo){

		var options = oListboxFrom.options;

		for(var i = 0; i < options.length; i++){

			if(options[i].selected){

				oListboxTo.appendChild(options[i]);

				i -= 1;

			}

		}

	}

	

	//上移

	ListUtil.shiftUp = function(oListbox) {

		if(oListbox.selectedIndex > 0){

			var oOption = oListbox.options[oListbox.selectedIndex];

			var oPrevOption = oListbox.options[oListbox.selectedIndex-1];

			oListbox.insertBefore(oOption,oPrevOption);

		}

	}

	//下移

	ListUtil.shiftDown = function(oListbox){

		if(oListbox.selectedIndex < oListbox.options.length-1){

			var oOption = oListbox.options[oListbox.selectedIndex];

			var oNextOption = oListbox.options[oListbox.selectedIndex+1];

			oListbox.insertBefore(oNextOption,oOption);

		}

	}

	

	//-->

	</script>

	<body text="#000000" bgcolor="#ffffff" link="#0033cc">

	<form method=post action="#">

	<table>

		<tr>

			<td>

				未选员工

				<select name="oListboxFrom" id="oListboxFrom" size="10" multiple="true"

					style="width:100px;height:250px;margin-left:20px;float:left">

					<option value="1" selected>员工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 align="center">

				<input type="button" value=" >>> "

					οnclick="ListUtil.moveAll(oListboxFrom, oListboxTo);" />

				<br/>

				<input type="button" value=" >> "

					οnclick="ListUtil.moveMuti(oListboxFrom, oListboxTo);" />

				<br/>

				<input type="button" value=" << " 

					οnclick="ListUtil.moveMuti(oListboxTo, oListboxFrom);" />

				<br/>

				<input type="button" value=" <<< " 

					οnclick="ListUtil.moveAll(oListboxTo, oListboxFrom);" />

				<br/>

				<input type="button" value=" ↑ "

					οnclick="ListUtil.shiftUp(oListboxFrom);" />

				<br/>

				<input type="button" value=" ↓ "

					οnclick="ListUtil.shiftDown(oListboxFrom);" />

			</td>

			<td>

				已选员工

				<select name="oListboxTo" id="oListboxTo" multiple="true" size="10"

					style="width:100px;height:250px;margin-left:20px;float:left">

					<option value="319094784">员工6</option>

					<option value="320274432">员工8</option>

					<option value="322109440">员工7</option>

				</select>

			</td>

		</tr>

	</table>

	</form>

	</body>

</html>

qjyong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
列表框的左右上下移动

效果：HTML页面代码： js操作列表框 <!-- var ListUtil = new Object(); //全部移动 ListUtil.moveAll = function moveAll(oListboxFrom,oListboxTo){ var options = oListboxFro
复制链接

扫一扫