使用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 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
JavaScript的function函数详细介绍
Nov 20 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
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
ExtJS 入门
2010/10/29 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
简述Python中的进程、线程、协程
2016/03/18 Python
python中正则表达式与模式匹配
2019/05/07 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python 多进程队列数据处理详解
2019/12/23 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
办加油卡单位介绍信
2014/01/09 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
年检委托书
2014/08/30 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
mysql部分操作
2021/04/05 MySQL
详解nodejs内置模块
2021/05/06 NodeJs
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js