使用Javascript实现选择下拉菜单互移并排序


Posted in Javascript onFebruary 23, 2016

本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码。

使用Javascript实现选择下拉菜单互移并排序

代码如下:

<html>
<head>
<title>使用Javascript实现选择下拉菜单互移并排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width="40%">
<select style="width:100px; height:200px" 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>
<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>
<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:100px; height:200px" 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++) {
var e = e1.options[i];
if (e1.options[i].selected&& OptionExists(e2, e.value)) {
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i = 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))
}
}
} 
//查询是否已经存在
function OptionExists(list, optValue) {
var find = true;
for (i = 0; i < list.options.length; i++) {
if (list.options[i].value == optValue) {
find = false;
break;
}
}
return find;
}
</script>
</body>
</html>

关于以上代码实现使用Javascript实现选择下拉菜单互移并排序的相关内容大家还很满意吧,代码有问题欢迎提出,我会及时和大家取得联系的!

Javascript 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
js函数调用的方式
May 06 Javascript
JS跨域问题详解
Nov 25 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 #Javascript
JavaScript tab选项卡插件实例代码
Feb 23 #Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 #Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 #Javascript
全面解析Bootstrap布局组件应用
Feb 22 #Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 #Javascript
JavaScript function函数种类详解
Feb 22 #Javascript
You might like
php preg_replace替换实例讲解
2013/11/04 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python的Django框架安装全攻略
2015/07/15 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
对python中的logger模块全面讲解
2018/04/28 Python
python中的decorator的作用详解
2018/07/26 Python
python 实现敏感词过滤的方法
2019/01/21 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python包的导入方式总结
2021/03/02 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
骨干教师培训感言
2014/01/16 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
中学生打架检讨书
2014/02/10 职场文书
教学督导岗位职责
2015/04/10 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL