本文介绍了javascript实现左右下拉框动态增删示例，非常实用，有兴趣的同学可以参考一下本文
效果：
1. Html部分代码
左1 左2 左3 左4 左5 左6 左7 左8 左9 左10
右1 右2 右3 右4 右5 右6 右7
登录后复制
2. JavaScript脚本代码如下:
立即学习“Java免费学习笔记（深入）”；
代码如下
functionmoveRight()
{
//获取左边select元素节点
varleftSelectNode = document.getElementById(“left”);
//获取子元素节点数组
//如果选定的索引号为-1,则提示用户
if(leftSelectNode.selectedIndex == -1)
{
alert(“请选定需要移动的选项”);
return;
}
//获取待移动的选项
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
{
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
{
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;
}
相关推荐：
JavaScript中E-mail地址格式验证实例分享
Javascript中new()详解
javascript实现文件拖拽事件的代码
以上就是JavaScript实现左右下拉框动态增删示例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2777722.html
