JS动态的把左边列表添加到右边的实现代码(可上下移动)


Posted in Javascript onNovember 17, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript"></script>
<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 获取用户客户端操作系统版本
Aug 25 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
leaflet的开发入门教程
Nov 17 #Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 #Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 #Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 #Javascript
jQuery 插件封装的方法
Nov 16 #Javascript
Node.js 数据加密传输浅析
Nov 16 #Javascript
JS中substring与substr的用法
Nov 16 #Javascript
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
德生H-501的评价与改造
2021/03/02 无线电
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP7新功能总结
2019/04/14 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
python 实现堆排序算法代码
2012/06/05 Python
Python、Javascript中的闭包比较
2015/02/04 Python
详解python 发送邮件实例代码
2016/12/22 Python
python 调用有道api接口的方法
2019/01/03 Python
Python txt文件如何转换成字典
2020/11/03 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
什么是数组名
2012/05/10 面试题
Unix如何添加新的用户
2014/08/20 面试题
致跳远运动员加油稿
2014/02/11 职场文书
经管应届生求职信范文
2014/05/18 职场文书
党支部季度考核意见
2015/06/02 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书