JavaScript如何实现组合列表框中元素移动效果
2016-03-01 09:25
645 查看
首先给大家说下组合框和列表框的区别:
组合框包括列表框和文本框的功能
文本框:只能输入数据
列表框:只能选择数据
组合框:既能输入数据,又能选择``
应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 。
实现的基本思想:
(1)编写init方法对两个列表框进行初始化;
(2)为body添加onload事件调用init方法;
(3)编写move(s1,s2)把s1中选中的选项移到s2;
(4)编写moveAll(s1,s2)把s1中所有的选项都移到s2.
(5)为按钮添加onclick事件。
javascript代码如下:
<script type="text/javascript" language="javascript"> //对下拉框信息进行初始化 function init() { for (i = ; i < ; i++) { var y = document.createElement("option");//增加一个元素option y.text = '选项' + i; var x=document.getElementById("s");//根据ID找到列表框 x.add(y, null); // } } //把选中的选项移到另一边 function move(s, s) { var index = s.selectedIndex; if (index == -) { alert("没有选中值"); return; } s.length++; s.options[s.length - ].value = s.options[index].value; s.options[s.length - ].text = s.options[index].text;//s中当前选中的值赋给s的最后一个元素 s.remove(index);//从s中移除当前元素 } //把一边的完全移到另一边 function moveAll(s, s) { if (s.length == ) { alert("没有可用选择"); return; } s.length = s.length + s.length; for (var i = ; i < s.length; i++) { s.options[s.length - s.length + i].value = s.options[i].value; s.options[s.length - s.length + i].text = s.options[i].text; } s.length = ; } </script>
<body>代码:
<body onload="init()"> <table> <tr> <td><select id="s" size= style="width:"></select></td> <td><input type="button" name="moveToRight" value=">" onClick="move(s,s)"> <br> <br> <input type="button" name="moveAllToRight" value=">>" onClick="moveAll(s,s)"> <br> <input type="button" name="moveToLeft" value="<" onClick="move(s,s)"> <br> <br> <input type="button" name="moveAllToLeft" value="<<" onClick="moveAll(s,s)"></td> <td><select id="s" name="s" size= style="width:"></select></td> </tr> </table> </body>
以上内容给大家介绍了JavaScript如何实现组合列表框中元素移动效果的相关知识,希望对大家有所帮助!
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- 数组方法汇总