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

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

效果：

1.超文本标记语言部分代码

表体对齐='中心' tr TD选择尺寸=' 15 ' id='左侧'选项左1/选项选项左2/选项选项左3/选项选项左4/选项选项左5/选项选项左6/选项选项左7/选项选项左8/选项选项左9/选项选项左10/选项/选择/td输入类型='按钮'值='向右移动'点击='向右移动()' br输入类型='按钮'值='向右移动'单击='向右移动()'/br输入类型='按钮'值='向左移动'点击='向左移动()' br输入类型='按钮'值='向左移动'点击='向左移动()' br/TD选择大小='15' id='right '选项右1/选项选项右2/选项选项右3/选项选项右4/选项选项右5/选项选项右6/选项选项右7/选项/选择TD/TD/tr/table/body .Java脚本语言脚本代码如下：

脚本类型='text/javascript '函数moveRight() { //获取左边挑选元素节点var left selectnode=文档。getelementbyid(' left ')；//获取子元素节点数组//如果选定的索引号为-1,则提示用户if(左选择节点。selectedindex==-1){ alert('请选定需要移动的选项');返回；} //获取待移动的选项var等待选择=left selectnode。选项[左选择节点。selectedindex]；//获取右边的塞莱茨元素节点并加入var rightSelectNode=文档。getelementbyid(' right ')；//右边新增一个节点右选择节点。append child(WaitSelection)；}函数moveAllright() {//获取挑选对象var left selectnode=文档。getelementbyid(' left ')；var rightSelectNode=文档。getelementbyid(' right ')；var options nodes=left selectnode。选项；var length=options nodes . length for(var I=0；一、长度；I){右选择节点。appendchild(选项节点[0])；} }函数moveLeft() { //获取左边的挑选对象var rightSelectNode=文档。getelementbyid(' right ')；//没有选中则提示if(右选择节点。selectedindex==-1){ alert('请选择一个选项');返回；} //获取待移动的选项var WaitmoveNode=right select node。选项[右选择节点。selectedindex]；//获取左边的挑选对象var left selectnode=文档。getelementbyid(' left ')；//左边的挑选对象加入节点leftselectnode。append child(Waitmovenode)；}函数moveAllLeft() { //获取右边的挑选对象var rightSelectNode=文档。getelementbyid(' right ')；var left selectnode=文档。getelementbyid(' left ')；var length=右selectnode。选项。长度；//遍历其选择权选项并加入到左边的挑选中for(var I=0；一、长度；I){左selectnode。appendchild(右选择节点。选项[0])；} } /script3 .半铸钢钢性铸铁(铸造半钢)简单代码如下：

样式选择，td { font:20px/40px '宋体；}选项{ width : 100 pxfont :20 px/40px '宋体；}输入{ padd : 3px font :20 px/40px '宋体；文本对齐：中心；宽度： 130像素；高度： 40px背景-颜色：橙色；}/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。