JS实现左边列表移到到右边列表功能
时间:2019-04-13
本文章向大家介绍JS实现左边列表移到到右边列表功能,主要包括JS实现左边列表移到到右边列表功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现功能:
1.左边的下拉框内容添加到右边的下拉框,支持多选移动,且同时将右边的下拉框对象移除;
2.支持列表中项目上下位置的移动;
3.效果图如下:
Html代码
<HTML> <HEAD> <TITLE>选择下拉菜单</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META NAME="Description" CONTENT="Power by hill"> </HEAD> <BODY> <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p> <form method="post" name="myform"> <table border="0" width="300"> <tr> <td width="40%"> <select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="山东">山东</option> <option value="安徽">安徽</option> <option value="重庆">重庆</option> <option value="福建">福建</option> <option value="甘肃">甘肃</option> <option value="广东">广东</option> <option value="广西">广西</option> <option value="贵州">贵州</option> <option value="海南">海南</option> <option value="河北">河北</option> <option value="黑龙江">黑龙江</option> </select> </td> <td width="20%" align="center"> <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/> <br/> <input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)"> </td> <td width="40%"> <select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)"> </select> </td> <td> <button onclick="changepos(list2,-1)" type="button">上移</button> <br/> <button onclick="changepos(list2,1)" type="button">下移</button> </td> </tr> </table> 值:<input type="text" name="city" size="40"> </form> <script language="JavaScript"> <!-- function moveOption(e1, e2){ try{ for(var i=0;i<e1.options.length;i++){ if(e1.options[i].selected){ var e = e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); ii=i-1 } } document.myform.city.value=getvalue(document.myform.list2); } catch(e){} } function getvalue(geto){ var allvalue = ""; for(var i=0;i<geto.options.length;i++){ allvalue +=geto.options[i].value + ","; } return allvalue; } function changepos(obj,index) { if(index==-1){ if (obj.selectedIndex>0){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) } } else if(index==1){ if (obj.selectedIndex<obj.options.length-1){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) } } } //--> </script> </BODY> </HTML>
总结
以上所述是小编给大家介绍的JS实现左边列表移到到右边列表功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Golang语言延迟函数defer用法分析
- HDUOJ---大菲波数
- HDUOJ Children’s Queue
- HDUOJ----1250 Hat's Fibonacci
- HDUOJ---1133(卡特兰数扩展)Buy the Ticket
- HDUOJ--2079选课时间(题目已修改,注意读题)
- HDUOJ---2082
- HDUOJ---2152
- nyoj-----D的小L
- HDUOJ---The Moving Points
- HDUOJ---------Kia's Calculation
- HDUOJ----Good Numbers
- DP较为完整的知识
- HDUOJ----The Number Off of FFF
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- pow函数问题
- 字节序列操作函数
- 3分钟短文:Laravel是怎么发出一封电子邮件的?
- Elasticsearch 设计模式
- Spring 的 WebSecurityConfigurerAdapter 过滤器
- 03.视频播放器Api说明
- Postfix配置Gmail中继发信
- 使用Syncthing自建私有同步盘
- 05.视频播放器内核切换封装
- sklearn做特征选择
- ResilioSync:公私兼备的同步盘
- 面向对象语言的三大特征: 封装 继承 多态(二)——继承
- 教你如何设置宝塔面板 Brotli压缩
- Message: session not created: This version of ChromeDriver only supports Chrome version 83
- 宝塔BT面板 设置开启TLSV1.3