今天闲来无事，写了一个小例子，用javascript 操作selecct，包括增加和删除option，例子是在一个select中，选择后，添加到另一个select中，在被添加的select中，可以将选项移除，下面是例子的原码，直接复制后，保存成html文件，即可运行，里面有详细的注释。
<%@ page contentType="text/html;charset=GB2312"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>javaScript操作select教程</title>
<script language="JavaScript">
//向targerSelect 中添加选中的项
function addOption(){
var waitfor = document.getElementById("waitforSelect"); //获取所有的waitforSelect选项
//循环所有的选项
for(var i=0;i<waitfor.length;i++){
//如果被选中，则向向targerSelect添加
if(waitfor.options[i].selected){
var values = waitfor.options[i].value;//获取被选中select的值
var texts = waitfor.options[i].text;//获取被选中select的text
document.getElementById("targerSelect").options.add(new Option(texts,values)) ;//添加选项
}
}
}
//移除targerSelect 中选中的项
function delOption(){
var targer = document.getElementById("targerSelect");//获取所有的targerSelect的选项
for(var i=0;i<targer.length;i++){
//判断是否选中
if(targer.options[i].selected){
targer.remove(i);//移除选中的项
i=-1;//重新开始循环 移除一个后，option的位置变了，必须重新循环
}
}
}
</script>
</head>
<table border="1" style="width: 50%">
<tr>
<td style="width:20%">
待选择域 ：
<select name="waitforSelect" id="waitforSelect" size="6" multiple="multiple" style="width: 200px" οndblclick="addOption();" >
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
<option value="5">text5</option>
<option value="6">text6</option>
<option value="7">text7</option>
<option value="8">text8</option>
<option value="9">text9</option>
</select>
</td>
<td style="width:10%">
<input type="button" name="button1" value="移入" οnclick="addOption();"/>
<input type="button" name="button2" value="移出" οnclick="delOption();"/>
</td>
<td style="width:20%">
移入选择域：
<select name="targerSelect" id="targerSelect" size="6" multiple="multiple" οndblclick="delOption();" style="width: 200px">
</select>
</td>
</tr>
</table>
<body>
</body>
</html>
1335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
