JavaScript实现左右下拉框动态增删示例
更新时间:2017年03月09日 08:18:18 作者:北斗星先森
本篇文章主要介绍了JavaScript实现左右下拉框动态增删示例,可以对下拉框进行删除和增加,非常具有实用价值,需要的朋友可以参考下。
选中下拉框中的选项实现左移右移
效果:
1. Html部分代码
<body> <table align="center"> <tr> <td ><select size="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> <input type="button" value="MoveRight" onclick="moveRight()"><br> <input type="button" value="MoveAllRight" onclick="moveAllright()"/><br> <input type="button" value="MoveLeft" onclick="moveLeft()"><br> <input type="button" value="MoveAllLeft" onclick="moveAllLeft()"><br> </td> <td> <select size="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"> 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]); } } </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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
这篇文章主要介绍了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法,涉及javascript动态创建页面元素、事件监听、回调函数使用等相关操作技巧,需要的朋友可以参考下2018-09-09原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
下面小编就为大家带来一篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-08Javascript中replace方法与正则表达式的结合使用教程
replace方法是javascript涉及到正则表达式中较为复杂的一个方法,严格上说应该是string对象的方法,下面这篇文章主要给大家介绍了关于Javascript中replace方法与正则表达式的结合使用的相关资料,需要的朋友可以参考下2022-09-09Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
这篇文章主要介绍了Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04浅析JavaScript定时器setTimeout的时延问题
这篇文章主要为大家详细介绍了JavaScript中定时器setTimeout有最小时延的相关知识,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
最新评论