javascript列表框左右移动，兼容IE,FF。留着有用

最新推荐文章于 2022-04-25 23:27:59 发布

hat11223

最新推荐文章于 2022-04-25 23:27:59 发布

阅读量463

点赞数

分类专栏： javascript 文章标签： javascript ie firefox button function 浏览器

本文链接：https://blog.csdn.net/hat11223/article/details/5755365

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<html>
<head>
  <title>javascript 列表框左右移动</title>
  <style type="text/css">
   select{width:100px;height:100px;}
  </style>
  <script type="text/javascript">
   function roveRight(){
    var lBox = document.getElementById("leftBox");
    var rBox = document.getElementById("rightBox");
    var count = 0;

    for(i=0;i<lBox.length;i++){
     if(lBox[i].selected){
      //添加一个option:new Option(text,value)
      rBox.options.add(new Option(lBox[i].text,lBox.value));
      count++;
     }
    }
    //循环用于同时删除多个option
    for(i=0;i<count;i++){
     lBox.remove(lBox.selectedIndex);
    }
   }
   function roveleft(){
    var lBox = document.getElementById("leftBox");
    var rBox = document.getElementById("rightBox");
    var count = 0;

    for(i=0;i<rBox.length;i++){
     if(rBox[i].selected){
      lBox.options.add(new Option(rBox[i].text,rBox.vale));
      count++;
     }
    }
    for(i=0;i<count;i++){
     rBox.remove(rBox.selectedIndex);
    }
   }

  </script>
</head>
<body>
  <select id="leftBox" multiple="multiple">
   <option value="北京"> 北京 </option>
   <option value="上海"> 上海 </option>
   <option value="广州"> 广州 </option>
   <option value="深圳"> 深圳 </option>
  </select>
  <input type="button" id="addBtn" οnclick="roveRight();" value=">>>" />
  <input type="button" id="addBtn" οnclick="roveleft();" value="<<<" />
  <select id="rightBox" multiple="multiple">
   <option value="成都"> 成都 </option>
   <option value="深圳"> 深圳 </option>
   <option value="南京"> 南京 </option>
   <option value="天津"> 天津 </option>
  </select>
</body>
</html>

之前写的一个比较麻烦的函数：

//   function addItem(){
//    var dSource = document.getElementById("leftBox");
//    var dResult = document.getElementById("rightBox");
//    var selIndex = dSource.selectedIndex;
//
//    //添加一个option:new Option(text,value)
//    dResult.options[dResult.options.length]=new Option(dSource.value,dSource.value);
//    if(document.all){
//     dSource.options[selIndex].removeNode(true);
//    }
//    else{
//     dSource.removeChild(dSource.childNodes[selIndex]);
//    }
//   }

由于Firefox不支持removeNode，需要判断浏览器再分别使用不同的,Firefox要用removeChild()