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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
jQuery 全选效果实现代码
Mar 23 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 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
模仿OSO的论坛(四)
2006/10/09 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python优先队列实现方法示例
2017/09/21 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
python图像和办公文档处理总结
2019/05/28 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
基于Python测试程序是否有错误
2020/05/16 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
企业2014年度工作总结
2014/12/10 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
安全生产学习心得体会
2016/01/18 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL