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 相关文章推荐
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 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时间戳使用实例代码
2008/06/07 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
实例讲解php数据访问
2016/05/09 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
JS实现简易日历效果
2021/01/25 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python绘制热力图示例
2019/09/27 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Spy++的使用方法及下载教程
2021/01/29 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
css3media响应式布局实例
2016/07/08 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
银行岗位培训心得体会
2016/01/09 职场文书