JS实现左边列表移到到右边列表功能


Posted in Javascript onMarch 28, 2018

实现功能:

1.左边的下拉框内容添加到右边的下拉框,支持多选移动,且同时将右边的下拉框对象移除;

2.支持列表中项目上下位置的移动;

3.效果图如下:

JS实现左边列表移到到右边列表功能

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实现左边列表移到到右边列表功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 #Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 #Javascript
浅谈js获取ModelAndView值的问题
Mar 28 #Javascript
vue页面加载闪烁问题的解决方法
Mar 28 #Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 #jQuery
vue-cli axios请求方式及跨域处理问题
Mar 28 #Javascript
You might like
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
微信小程序开发实现消息推送
2020/11/18 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
Python的Flask框架与数据库连接的教程
2015/04/20 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python实现人民币大写转换
2018/06/20 Python
Python 从相对路径下import的方法
2018/12/04 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
韩国11街:11STREET
2018/03/27 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
业务员自荐信范文
2014/04/20 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
结婚主持人致辞
2015/07/28 职场文书
军训后的感想
2015/08/07 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript