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 相关文章推荐
js 通用订单代码
Dec 23 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
jquery validate demo 基础
Oct 29 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 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实现分页的一个示例
2006/10/09 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
详解python中的json的基本使用方法
2016/12/21 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
市场部管理制度
2014/02/02 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
文明单位汇报材料
2014/12/24 职场文书
介绍信样本
2015/01/31 职场文书
担保书格式范文
2015/09/22 职场文书
小学中队长竞选稿
2015/11/20 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js