JavaScript实现左右下拉框动态增删示例

<script type="text/javascript">

 functionmoveRight()

 {

   //获取左边select元素节点

   varleftSelectNode = document.getElementById("left");

   //获取子元素节点数组

   //如果选定的索引号为-1,则提示用户

   if(leftSelectNode.selectedIndex == -1)

   {

     alert("请选定需要移动的选项");

     return;

   }

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

   //获取待移动的选项

   varwaitSelection = leftSelectNode.options[leftSelectNode.selectedIndex];

   //获取右边的selec元素节点并加入

   varrightSelectNode = document.getElementById("right");

   //右边新增一个节点

   rightSelectNode.appendChild(waitSelection);

 }

 functionmoveAllright()

 {//获取select对象

   varleftSelectNode = document.getElementById("left");

   varrightSelectNode = document.getElementById("right");

   varoptionsNodes = leftSelectNode.options;

   varlength = optionsNodes.length;

   for(vari = 0; i < length; i++)

   {

     rightSelectNode.appendChild(optionsNodes[0]);

   }

 }

 functionmoveLeft()

 {

   //获取左边的select对象

  varrightSelectNode = document.getElementById("right");

  //没有选中则提示

   if(rightSelectNode.selectedIndex == -1)

   {

     alert("请选择一个选项");

     return;

   }

   //获取待移动的选项

   varwaitMoveNode = rightSelectNode.options[rightSelectNode.selectedIndex];

   //获取左边的select对象

   varleftSelectNode = document.getElementById("left");

   //左边的select对象加入节点

   leftSelectNode.appendChild(waitMoveNode);

 }

 functionmoveAllLeft()

 {

   //获取右边的select对象

   varrightSelectNode = document.getElementById("right");

   varleftSelectNode = document.getElementById("left");

   varlength = rightSelectNode.options.length;

   //遍历其option选项并加入到左边的select中

   for(vari = 0; i < length; i++)

   {

     leftSelectNode.appendChild(rightSelectNode.options[0]);

   }

 }

</script>

<style>

  select, td

  {

    font:20px/40px'宋体';

  }

  option {width:100px;

    font:20px/40px'宋体';

  }

  input {

    padding:3px;

    font:20px/40px'宋体';

    text-align:center;

    width:130px;

    height:40px;

    background-color: orange;

  }

</style>