select动态添加删除选项，添加的option只出现在最后一个select？

如果只有3个select的话倒是正常，但是如果有4个以上的select就出错了
比如先在S1上选择BBB，然后再在S2上选择CCC，此时
S3和S4只能选择AAA，DDD，EEE
如果我再在S1上重新选择为DDD，此时S3、S4的可选项应该是 AAA，BBB，EEE
但是...下面的代码执行到这里的时候
S3的可选项就变为 AAA，EEE
而S4则为 AAA，BBB，EEE
我在sels[i].insertBefore(opt, sels[i].options[j]);前后各用alert来输出，确定它有执行了这句话啊...
不过不知道为什么...alert(opt.innerHTML)的时候，中间几次会变成空白...<!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 reomveOption(sels, index, value){
  for(var i = 0; i < sels.length; i++){
    if( i != index ){
      for(var j = 0; j < sels[i].options.length; j++){
        if(sels[i].options[j].value == value){
          sels[i].remove(j);
          break;
        }
      }
    }
  }
}function insertOption(sels, index, value){
  var opt = document.createElement("option");
  for(var k = 0; k < sels[index].options.length; k++) {
    if(sels[index].options[k].value == value) {
      opt.innerText = sels[index].options[k].text;
      opt.text = sels[index].options[k].text;
      opt.value = value;
      break;
    }
  }
  for(var i = 0; i < sels.length; i++) {
    if( i != index ){
      for(var j = 0; j < sels[i].options.length; j++){
        if(sels[i].options[j].value > value){
          sels[i].insertBefore(opt, sels[i].options[j]);
          break;
        } else if(j == sels[i].options.length){
          sels[i].appendChild(opt);
        }
      }
    }
  }
}function dselect(obj) {
  var tb = document.getElementById("tb");
  var sels = tb.getElementsByTagName("select");
  for(var i = 0; i < sels.length; i++) {
    if(sels[i].id == obj.id) {
      if(obj.prevValue){
        insertOption(sels, i, obj.prevValue);
        obj.prevValue = null;
      }
      if(obj.selectedIndex >= 0){
        reomveOption(sels, i, obj.prevValue = obj.options[obj.selectedIndex].value);
      }
      break;
    }
  }
}</script>
</head><body>
<table id="tb" cellpadding="5">
    <tr>
      <td>1</td>
      <td>
        <select id="S1" name="S1" onchange="dselect(this)">
          <option value="1" title="AAA">AAA</option>
          <option value="2" title="BBB">BBB</option>
          <option value="3" title="CCC">CCC</option>
          <option value="4" title="DDD">DDD</option>
          <option value="5" title="EEE">EEE</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <select id="S2" name="S2" onchange="dselect(this)">
          <option value="1" title="AAA">AAA</option>
          <option value="2" title="BBB">BBB</option>
          <option value="3" title="CCC">CCC</option>
          <option value="4" title="DDD">DDD</option>
          <option value="5" title="EEE">EEE</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <select id="S3" name="S3" onchange="dselect(this)">
          <option value="1" title="AAA">AAA</option>
          <option value="2" title="BBB">BBB</option>
          <option value="3" title="CCC">CCC</option>
          <option value="4" title="DDD">DDD</option>
          <option value="5" title="EEE">EEE</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <select id="S4" name="S4" onchange="dselect(this)">
          <option value="1" title="AAA">AAA</option>
          <option value="2" title="BBB">BBB</option>
          <option value="3" title="CCC">CCC</option>
          <option value="4" title="DDD">DDD</option>
          <option value="5" title="EEE">EEE</option>
        </select>
      </td>
    </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    <script type="text/javascript">
    var _options = [];
    var _selects = [];
    function doThis(_this)
    {
    var theOptions = [];
    var selectedOption = _this.options[_this.selectedIndex];
    for(var i=0,o=null;o=_options[i];i++)
    {
    if( o.text == selectedOption.text)continue;
    theOptions[theOptions.length] = new Option(o.text,o.value);
    }
    for(var i=0,o=null;o=_selects[i];i++)
    {
    if(o==_this) continue;
    o.options.length = 0;
    for(var j=0,op=null;op=theOptions[j];j++)
    o.options.add(new Option(op.text,op.value));
    }
    }
    window.onload=function(){
    _selects =document.getElementsByTagName("select");
    for(var i=0,o=null;o=_selects[0].options[i];i++)
    {
    _options[_options.length] = new Option(o.text,o.value);
    }
    }
    </script>lz看这样可以不?
      

  2.   

    终于搞定了...就insertOption方法改了一点点...function insertOption(sels, index, value){
      var txt;
      var v;
      for(var k = 0; k < sels[index].options.length; k++) {
        if(sels[index].options[k].value == value) {
          txt = sels[index].options[k].text;
          v = value;
          break;
        }
      }
      for(var i = 0; i < sels.length; i++) {
        if( i != index ){
          for(var j = 0; j < sels[i].options.length; j++){
            if(sels[i].options[j].value > value){
              sels[i].options.add(new Option(txt,v),(j+1));
              break;
            } else if(j == sels[i].options.length){
              sels[i].appendChild(opt);
            }
          }
        }
      }
    }
    用add方法替代insertBefore
    而且add还一定要用new Option(text, value)的方法来添加option，用createElement还不行哦...提示参数错误...
      

  3.   

    更正
    insertOption必须修改成下面这样，不然如果选择最后一个option的话，则无法再添加回来function insertOption(sels, index, value){
      var txt;
      var v;
      var j;
      for(var k = 0; k < sels[index].options.length; k++) {
        if(sels[index].options[k].value == value) {
          txt = sels[index].options[k].text;
          v = value;
          break;
        }
      }
      for(var i = 0; i < sels.length; i++) {
        if( i != index ){
          for(j = 0; j < sels[i].options.length; j++){
            if(sels[i].options[j].value > value){
              sels[i].options.add(new Option(txt,v),(j));
              sels[i].options[j].title = txt;
              break;
            }
          }
          if(j >= sels[i].options.length) {
            sels[i].options.add(new Option(txt,v),sels[i].options.length);
            sels[i].options[sels[i].options.length-1].title = txt;
          }
        }
      }
    }