js移动(增加删除)select option的实现代码

发布时间:2019-11-25编辑:脚本学堂
本文介绍下,用js增加与删除select下拉列表框中的option选项的代码,有需要的朋友,可以参考下。

代码如下:
 

复制代码 代码示例:

<!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页面跳转的代码实例