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官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
extjs 为某个事件设置拦截器
Jan 15 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
Javascript webpack动态import
Apr 19 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中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
使用js实现数据格式化
2014/12/03 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
python从入门到精通(DAY 3)
2015/12/20 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Python中文件的读取和写入操作
2018/04/27 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python实时监控logstash日志代码
2020/04/27 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
竞选部门副经理的自荐书范文
2014/02/11 职场文书
公司承诺书格式
2014/05/21 职场文书
质量承诺书怎么写
2014/05/24 职场文书
科技之星事迹材料
2014/06/02 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
pycharm无法安装cv2模块问题
2022/05/20 Python
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python