使用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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
Angular工具方法学习
Dec 26 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
VUE长按事件需求详解
Oct 18 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
使用Vue生成动态表单
Nov 26 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
vue 实现上传组件
May 31 Vue.js
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
星际中的相关伤害
2020/03/04 星际争霸
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP PDO函数库详解
2010/04/27 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
js中document.write的那点事
2014/12/12 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
英语专业毕业生自荐信范文
2013/12/31 职场文书
银行职员思想汇报
2013/12/31 职场文书
工作表现自我评价
2014/02/08 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
股东授权委托书范本
2014/09/13 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
财务总监岗位职责
2015/02/03 职场文书
建议书的格式及范文
2015/09/14 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
golang 比较浮点数的大小方式
2021/05/02 Golang