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 相关文章推荐
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
eslint 的三大通用规则详解
May 16 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
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
PHP提取中文首字母
2008/04/09 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
Three.js基础部分学习
2017/01/08 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
Seajs源码详解分析
2019/04/02 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
简介Django框架中可使用的各类缓存
2015/07/23 Python
python hough变换检测直线的实现方法
2019/07/12 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
如何提高JDBC的性能
2013/04/30 面试题
电子邮箱格式怎么写
2014/01/12 职场文书
关于建议书的格式范文
2014/05/20 职场文书
生活小常识广播稿
2014/09/16 职场文书
工作经验交流材料
2014/12/30 职场文书
加薪申请报告范本
2015/05/15 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
MongoDB使用场景总结
2022/02/24 MongoDB