JS下拉框内容左右移动效果的具体实现


Posted in Javascript onJuly 10, 2013
<HTML>
<HEAD>
<TITLE>选择下拉菜单</TITLE>
<META NAME="Description" CONTENT="Power by hill">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</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>
Javascript 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
javascript的内存管理详解
Aug 07 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
js实现常见的工具条效果
Mar 02 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
vue之延时刷新实例
Nov 14 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 #Javascript
关于js遍历表格的实例
Jul 10 #Javascript
js浮动图片的动态效果
Jul 10 #Javascript
JS文本框默认值处理详解
Jul 10 #Javascript
JS实现点击下载的小例子
Jul 10 #Javascript
javascript 得到文件后缀名的思路及实现
May 09 #Javascript
让js弹出窗口居前显示的实现方法
Jul 10 #Javascript
You might like
PHP whois查询类定义与用法示例
2019/04/03 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python的文件操作方法汇总
2017/11/10 Python
分析Python中解析构建数据知识
2018/01/20 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
pip安装python库的方法总结
2019/08/02 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
2014年开学第一课活动方案
2014/03/06 职场文书
租房协议书范本
2014/04/09 职场文书
绘画专业自荐信
2014/07/04 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
2014年度培训工作总结
2014/11/27 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android