使用Javascript实现选择下拉菜单互移并排序
作者：Idus 时间：2023-09-07 18:14:45
本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序，代码简单易懂，具有参考价值，先给大家展示下效果图，感觉还很满意请参考本段代码。
代码如下：
<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实现选择下拉菜单互移并排序的相关内容大家还很满意吧，代码有问题欢迎提出，我会及时和大家取得联系的！
标签：js,下拉,菜单,排序
0
投稿猜你喜欢
Viso 2019 下载与激活方法
2023-03-19 08:17:44
PyQt5+Pycharm安装和配置图文教程详解
2022-12-20 08:50:26
Python识别html主要文本框过程解析
2023-11-09 01:31:52
Python趣味挑战之用pygame实现飞机塔防游戏
2022-07-18 04:00:02
微信小程序开发之组件设计规范
2024-04-18 09:35:15
用VBS语言实现的网页计算器源代码
2007-12-26 17:09:00
Python绘制柱状图可视化神器pyecharts
2023-06-07 12:38:41
pandas实现按行选择的示例代码
2021-08-04 01:53:50
Python绘制地理图表可视化神器pyecharts
2021-01-22 18:08:58
HTML编辑器FCKeditor使用详解
2010-02-28 12:30:00
Python利用Beautiful Soup模块创建对象详解
2023-05-17 23:24:58
Python开发之利用re模块去除代码块注释
2022-08-26 22:11:59
影响ORACLE汉字显示的字符集问题
2008-06-13 16:49:00
python 日志模块 日志等级设置失效的解决方案
2022-01-25 07:27:19
Mysql5.7服务无法启动的图文解决教程
2024-01-29 03:44:39
python计算质数的6种方法
2023-11-06 10:22:27
一篇文章带你了解kali局域网攻击
2022-02-21 23:53:35
vuex 第三方包实现数据持久化的方法
2024-04-30 10:34:56
Python对列表去重的多种方法(四种方法)
2023-03-18 23:38:19
python 输出所有大小写字母的方法
2021-01-05 01:02:57