代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>移动(增加删除)select option-www.jb200.com</title>
<style type="text/css">
select { display:inline; width:150px; background:#cef;}
</style>
</head>
<body>
<select size="10" id="selectleft">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input type="button" id="addto" value="添加" />
<input type="button" id="moveback" value="删除" />
<select size="10" id="selectright"></select>
<script type="text/javascript">
var addTo = document.getElementById("addto");
var moveBack = document.getElementById("moveback");
var selectLeft = document.getElementById("selectleft");
var selectRight = document.getElementById("selectright");
addTo.onclick = addOption;
moveBack.onclick = delOption;
//检验传入的值是否在右边出现过
function hasOption(str){
for(var i=0;i<selectRight.options.length;i++){
if(selectRight.options[i].value==str){
return false;
}
}
return true;
}
function addOption(){
var nowIndex = selectRight.options.length; //右边的下一个索引
var selectIndex = selectLeft.options.selectedIndex; //做边被选种项索引
var selectText = selectLeft.options[selectIndex].text; //被选种项文本
var selectValue = selectLeft.options[selectIndex].value; //被选种项值
if((selectIndex!=-1)&&hasOption(selectValue)){ //如果选了一项且右边没有,执行
var newoption = new Option(selectText,selectValue,false,false);
selectRight.options[nowIndex] = newoption;
}
}
function delOption(){
var selectIndex = selectRight.options.selectedIndex;
if(selectIndex!=-1){
selectRight.options[selectIndex] = null; //清空选种项
}
}
</script>
</body>
</html>
建议大家将此代码保存为test.html,亲自运行测试下看看效果如何?!
>>> 您可能感兴趣的文章:
JavaScript 移动和重排option选项的方法
JavaScript 移除option选项的方法
JavaScript 选择option选项的方法
JavaScript 添加option选项的方法
js 添加、修改、删除select中option元素的实现代码
js动态添加与删除 select option的代码
javasript 操作select中option的常用方法
js获取select下拉标签中option的属性值
js删除select下拉列表框中option选项的多种方法(附代码)
js 控制select下拉列表框中option选项的上下移动
Js动态添加select的option选项的代码
javascript操作Select options集合的实例介绍
JS动态添加与删除option选项的代码
js页面跳转 option location页面跳转的代码实例