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 面向对象编程  function是方法(函数)
Sep 17 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
Angular实现form自动布局
Jan 28 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
python3让print输出不换行的方法
2020/08/24 Python
自我评价怎么写好呢?
2013/12/05 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
幼儿园六一主持词
2015/06/30 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
vue实现滑动解锁功能
2022/03/03 Vue.js