使用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显示隐藏层比较不错的方法分析
Sep 30 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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
preg_match_all使用心得分享
2014/01/31 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
mac系统安装Python3初体验
2018/01/02 Python
详解python中递归函数
2019/04/16 Python
python3.6编写的单元测试示例
2019/08/17 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
python 下载文件的多种方法汇总
2020/11/17 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
学期研究性学习个人的自我评价
2014/01/09 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2014教师年度工作总结
2014/11/10 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS