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 - HTML的request类
Jul 15 Javascript
子页向父页传值示例
Nov 27 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
插件导致ECharts被全量引入的坑示例解析
Sep 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中的traits实现代码复用使用实例
2015/05/13 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
Python实现读取json文件到excel表
2017/11/18 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Python pip 常用命令汇总
2020/10/19 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
商场消防管理制度
2014/01/12 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
生产助理岗位职责
2014/06/18 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
代理词怎么写
2015/05/25 职场文书
开国大典观后感
2015/06/04 职场文书
收入证明怎么写
2015/06/12 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis