javascript对select元素的操作

最新推荐文章于 2024-04-18 09:43:47 发布

清风浪迹天涯

最新推荐文章于 2024-04-18 09:43:47 发布

阅读量573

点赞数

分类专栏： JavaScript 文章标签： javascript button null html border action

JavaScript 专栏收录该内容

162 篇文章 0 订阅

订阅专栏

Html代码

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< title > JavaScript强化训练－－下拉列表的操作01 </ title >
< 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--;//下标变了
}
}
}
</ 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 = "-->>" onclick = "moveOption('leftSel','rightSel');" >
< br >
< input type = "button" id = "moveOne" value = "<<--" onclick = "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;" >
</ div >
</ body >
</ html >

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript强化训练－－下拉列表的操作01</title>
<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--;//下标变了
			}
		}
	}

</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;">
</div>
</body>
</html>

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

方法1：

Js代码

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

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

方法2：

Js代码

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

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表示索引号

清风浪迹天涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript对select元素的操作

Html代码 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>JavaScript强化训练－－下拉列表的操作01</title> <script language="JavaScript" type="text/javascript"> //移动下拉框被选中选项 //fromSelId :源下拉框id //toSelId :目标下拉框id
复制链接

扫一扫