html下拉框动态增加成员,JavaScript实现左右下拉框动态增删示例

选中下拉框中的选项实现左移右移

效果：

1. Html部分代码

左1 左2 左3 左4 左5 左6 左7 左8 左9 左10

右1 右2 右3 右4 右5 右6 右7

2. JavaScript脚本代码如下:

function moveRight()

{

//获取左边select元素节点

var leftSelectNode = document.getElementById("left");

//获取子元素节点数组

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

if (leftSelectNode.selectedIndex == -1)

{

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

return;

}

//获取待移动的选项

var waitSelection = leftSelectNode.options[leftSelectNode.selectedIndex];

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

var rightSelectNode = document.getElementById("right");

//右边新增一个节点

rightSelectNode.appendChild(waitSelection);

}

function moveAllright()

{//获取select对象

var leftSelectNode = document.getElementById("left");

var rightSelectNode = document.getElementById("right");

var optionsNodes = leftSelectNode.options;

var length = optionsNodes.length;

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

{

rightSelectNode.appendChild(optionsNodes[0]);

}

}

function moveLeft()

{

//获取左边的select对象

var rightSelectNode = document.getElementById("right");

//没有选中则提示

if (rightSelectNode.selectedIndex == -1)

{

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

return;

}

//获取待移动的选项

var waitMoveNode = rightSelectNode.options[rightSelectNode.selectedIndex];

//获取左边的select对象

var leftSelectNode = document.getElementById("left");

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

leftSelectNode.appendChild(waitMoveNode);

}

function moveAllLeft()

{

//获取右边的select对象

var rightSelectNode = document.getElementById("right");

var leftSelectNode = document.getElementById("left");

var length = rightSelectNode.options.length;

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

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

{

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

}

}

3.CSS简单代码如下:

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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。