JavaScript如何实现组合列表框中元素移动效果


Posted in Javascript onMarch 01, 2016

 首先给大家说下组合框和列表框的区别:

组合框包括列表框和文本框的功能

文本框:只能输入数据

列表框:只能选择数据

组合框:既能输入数据,又能选择``

应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 。

实现的基本思想:

(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如何实现组合列表框中元素移动效果的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 #Javascript
JavaScript Array对象详解
Mar 01 #Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 #Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 #Javascript
原生javascript实现解析XML文档与字符串
Mar 01 #Javascript
JS创建对象几种不同方法详解
Mar 01 #Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 #Javascript
You might like
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
用python实现学生管理系统
2020/07/24 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
车辆维修工自我评价怎么写
2013/09/20 职场文书
酒店管理毕业生自荐信
2013/10/24 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
精彩广告词大全
2014/03/19 职场文书
学校评语大全
2014/05/06 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
亮剑观后感500字
2015/06/05 职场文书
vue 实现上传组件
2021/05/31 Vue.js
mysql 子查询的使用
2022/04/28 MySQL