select动态添加删除选项

以前写的一个和这差不多，可以参考下。
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function initData(oSel, nMax){
    oSel.options.length = 0;
    oSel.options.add(new Option('请选择', ''));
    for(var i = 1; i <= nMax; i++){
        oSel.options.add(new Option(i, i));
    }
}
function reomveOption(sels, index, value){
    var i = 0, j, len = sels.length;
    for(i = 0; i < len; i++){
        if( i != index ){
            for(j = 0; j < sels[i].options.length; j++){
                if(sels[i].options[j].value == value){
                    sels[i].remove(j);
                }
            }
        }
    }
}
function insertOption(sels, index, value){
    var i = 0, j, len = sels.length, opt;
    for(i = 0; i < len; i++){
        if( i != index ){
            opt = new Option(value, value);
            document.all && (opt.innerHTML = value);
            for(j = 0; j < sels[i].options.length; j++){
                if(sels[i].options[j].value > value){
                    sels[i].insertBefore(opt, sels[i].options[j]);
                    break;
                }
            }
            if(j >= sels[i].options.length){
                sels[i].appendChild(opt);
            }
        }
    }
}
window.onload = function(){
    var tb = document.getElementById("tb"),
        sels = tb.getElementsByTagName("select"),
        i, len = sels.length;
    for(i = 0; i < len; i++){
        initData(sels[i], len);
        (function(i){
            sels[i].onchange = function(){
                if(this.prevValue){
                    insertOption(sels, i, this.prevValue);
                    this.prevValue = null;
                }
                if(this.selectedIndex > 0){
                    reomveOption(sels, i, this.prevValue = this.options[this.selectedIndex].value);
                }
            };
        })(i);
    }
};
</script>
</head><body>
<table id="tb" cellpadding="5">
    <tr><td>1</td><td><select></select></td></tr>
    <tr><td>2</td><td><select></select></td></tr>
    <tr><td>3</td><td><select></select></td></tr>
    <tr><td>4</td><td><select></select></td></tr>
    <tr><td>5</td><td><select></select></td></tr>
    <tr><td>6</td><td><select></select></td></tr>
</table>
</body>
</html>

<html>
<head>
<script type="text/javascript">
function s1_change(){
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s3 = document.getElementById("s3");
del(s1,s2,s1.value);
del(s1,s3,s1.value);
} function s2_change(){
var s2 = document.getElementById("s2");
var s3 = document.getElementById("s3");
del(s2,s3,s2.value);
}
function del(el1,el2,txt){
for(var i=el2.childNodes.length-1;i>=0;i=i-1){
el2.removeChild(el2.childNodes[i]);
}
for(var i=0;i<el1.childNodes.length;i=i+1){
if(el1.childNodes[i].tagName=="OPTION"){
if(el1.childNodes[i].value!=txt){
var optionValue = el1.childNodes[i].value;
var option = new Option(optionValue,optionValue);
el2.add(option);
}
}
}
}
</script>
</head>
<body>
<select id="s1" onchange="s1_change()">
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
<option value="dd">dd</option>
<option value="ee">ee</option>
<option value="ff">ff</option>
<option value="gg">gg</option>
<option value="hh">hh</option>
<option value="ii">ii</option>
<option value="jj">jj</option>
</select>
<select id="s2" onchange="s2_change()">
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
<option value="dd">dd</option>
<option value="ee">ee</option>
<option value="ff">ff</option>
<option value="gg">gg</option>
<option value="hh">hh</option>
<option value="ii">ii</option>
<option value="jj">jj</option>
</select>
<select id="s3">
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
<option value="dd">dd</option>
<option value="ee">ee</option>
<option value="ff">ff</option>
<option value="gg">gg</option>
<option value="hh">hh</option>
<option value="ii">ii</option>
<option value="jj">jj</option>
</select>
</body>
<html>

// 1.判断select选项中是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
    var isExit = false;
    for (var i = 0; i < objSelect.options.length; i++) {
        if (objSelect.options[i].value == objItemValue) {
            isExit = true;
            break;
        }
    }
    return isExit;
}

// 2.向select选项中加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
    //判断是否存在
    if (jsSelectIsExitItem(objSelect, objItemValue)) {
        alert("该Item的Value值已经存在");
    } else {
        var varItem = new Option(objItemText, objItemValue);
        objSelect.options.add(varItem);
        alert("成功加入");
    }
}

// 3.从select选项中删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
    //判断是否存在
    if (jsSelectIsExitItem(objSelect, objItemValue)) {
        for (var i = 0; i < objSelect.options.length; i++) {
            if (objSelect.options[i].value == objItemValue) {
                objSelect.options.remove(i);
                break;
            }
        }
        alert("成功删除");
    } else {
        alert("该select中不存在该项");
    }
}


// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
    var length = objSelect.options.length - 1;
    for(var i = length; i >= 0; i--){
        if(objSelect[i].selected == true){
            objSelect.options[i] = null;
        }
    }
}

// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
    //判断是否存在
    if (jsSelectIsExitItem(objSelect, objItemValue)) {
        for (var i = 0; i < objSelect.options.length; i++) {
            if (objSelect.options[i].value == objItemValue) {
                objSelect.options[i].text = objItemText;
                break;
            }
        }
        alert("成功修改");
    } else {
        alert("该select中不存在该项");
    }
}

// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
    //判断是否存在
    var isExit = false;
    for (var i = 0; i < objSelect.options.length; i++) {
        if (objSelect.options[i].text == objItemText) {
            objSelect.options[i].selected = true;
            isExit = true;
            break;
        }
    }
    //Show出结果
    if (isExit) {
        alert("成功选中");
    } else {
        alert("该select中不存在该项");
    }
}

// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;

// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;

// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;

// 11.清空select的项
document.all.objSelect.options.length = 0;

上面的发错了：
<!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=utf-8" />
<title>test</title>
<script type="text/javascript">
var j = 0;
function add(){
   j++;
   var obj = document.getElementById("select1");
   var addop = new Option('sea'+j);
    obj.options[obj.options.length]=addop;
}function deleteObj(){
  var objSelect = document.getElementById("select1");
  for (var i = 0; i < objSelect.options.length; i++) {
      if(objSelect[i].selected == true){
            objSelect.options[i] = null;
            break;
        }
   }
}var index = 0;
function selectNext(){
   var objSelect = document.getElementById("select1");
   if(index < objSelect.options.length){
      index++;
      objSelect.options[index].selected = true;
  if(index==objSelect.options.length-1){
      index=-1;
  }
   }
}
//得到选中的值
function getText(){
   var objSelect = document.getElementById("select1");
   for (var i = 0; i < objSelect.options.length; i++) {
      if(objSelect[i].selected == true){
            alert("text:"+objSelect.options[i].value+"  index:"+objSelect.options.selectedIndex);
            break;
        }
   }
}//清空select
function clear2(){
   var objSelect = document.getElementById("select1");
   objSelect.options.length = 0;
}
</script>
<body>
<select name="select1" id="select1">
<option>zhy</option>
<option>sea</option>
</select>
<a href="#" onclick="add();">add</a>
<a href="#" onclick="deleteObj();">delete</a>
<a href="#" onclick="selectNext();">select next</a>
<a href="#" onclick="getText();">getText</a>
<a href="#" onclick="clear2();">clear</a>
</body>
</html>

http://www.cnblogs.com/zyh-nhy/archive/2007/08/08/847876.html
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

调试易

select动态添加删除选项

解决方案 »