时间：2021-07-01 10:21:17 帮助过：5人阅读
本文介绍了JavaScript实现左右下拉框动态增删示例，非常实用，有兴趣的同学可以参考一下本文
效果：
1. Html部分代码
<body>
<tablealign="center">
<tr>
<td><selectsize="15"id="left">
<option>左1</option>
<option>左2</option>
<option>左3</option>
<option>左4</option>
<option>左5</option>
<option>左6</option>
<option>左7</option>
<option>左8</option>
<option>左9</option>
<option>左10</option>
</select></td>
<td>
<inputtype="button"value="MoveRight"onclick="moveRight()"><br>
<inputtype="button"value="MoveAllRight"onclick="moveAllright()"/><br>
<inputtype="button"value="MoveLeft"onclick="moveLeft()"><br>
<inputtype="button"value="MoveAllLeft"onclick="moveAllLeft()"><br>
</td>
<td>
<selectsize="15"id="right">
<option>右1</option>
<option>右2</option>
<option>右3</option>
<option>右4</option>
<option>右5</option>
<option>右6</option>
<option>右7</option>
</select>
</td>
<td></td>
</tr>
</table>
</body>2. JavaScript脚本代码如下:
| 代码如下 | |
<script type="text/javascript"> 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 < 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> | |
3.CSS简单代码如下:
| 代码如下 | |
<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> | |
相关推荐：
JavaScript中E-mail地址格式验证实例分享
Javascript中new()详解
javascript实现文件拖拽事件的代码
以上就是JavaScript实现左右下拉框动态增删示例的详细内容，更多请关注Gxl网其它相关文章！