javascript下拉列表框操作大全

最新推荐文章于 2024-08-06 08:00:33 发布

一拳超超人

最新推荐文章于 2024-08-06 08:00:33 发布

阅读量7.4k

点赞数

分类专栏：前端文章标签： button javascript html null border

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test01</title>
<mce:script  language="JavaScript" type="text/javascript"><!--
	//移动下拉框被选中选项
	//fromSelId :源下拉框id
	//toSelId   :目标下拉框id
	function moveOption(fromSelId,toSelId){
		var fromSel = document.getElementById(fromSelId);
		var toSel = document.getElementById(toSelId);

		if(fromSel==null||toSel==null){
			return false;
		}

		for(var i = 0;i < fromSel.options.length;i++){
			var _option = fromSel.options[i];
			//是否选中
			if(_option.selected){
				//往目标下拉框加添加选项
				toSel.appendChild(_option);
				i--;//下标变了
			}
		}
	}
// --></mce:script>
</head>

<body bgcolor="abcdef">
<form id='demoFrm' name="demoFrm" method="post" action="" >

<table border="1" align="center" width="300">
<tr>
	<td colspan="3" align="center">下拉列表操作的演示</td>
</tr>
<tr>
	<td  align="center" width="100">
		<select multiple="multiple" size="10" id="leftSel">
			<option value="1">第一个理拉框的值1</option>
			<option value="2">第一个理拉框的值2</option>
			<option value="3">第一个理拉框的值3</option>
			<option value="4">第一个理拉框的值4</option>
		</select>
	</td>
	<td align="center" width="100">
		<input type="button"  id="moveTwo" value="-->>" οnclick="moveOption('leftSel','rightSel');">
		<br>
		<input type="button"  id="moveOne" value="<<--" οnclick="moveOption('rightSel','leftSel');">
	</td>
	<td align="center" width="100">
		<select multiple="multiple" size="10" id="rightSel">
			<option value="1">第二个理拉框的值1</option>
			<option value="2">第二个理拉框的值2</option>
			<option value="3">第二个理拉框的值3</option>
			<option value="4">第二个理拉框的值4</option>
		</select>
	</td>
</tr>
</table>

</form>

<div id="showContent" style="font-size:30px;" mce_style="font-size:30px;">
</div>
</body>
</html>

向select对象里添加option的2中常见方法

方法1：

 var option = new Option(text,value);//注意参数1为文本显示值，参数为value值
 selectobj.options.add(option);

方法2：

var option = document.createElement("option");   
option.appendChild(document.createTextNode("text"));   
option.setAttribute("value","value");   
selectobj.appendChild(option );

重要属性

1 ，options（为一个Option对象数组）

2 ，selectedIndex 为选中项的索引

重要方法

1， appencChild(option)添加一个选项

2， remove(0) 0表示索引号