选中下拉框中的选项实现左移右移
效果:
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论