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