使用Javascript实现选择下拉菜单互移并排序
作者：Idus 发布时间：2023-09-07 18:14:45
标签：js,下拉,菜单,排序
本文给大家介绍使用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实现选择下拉菜单互移并排序的相关内容大家还很满意吧，代码有问题欢迎提出，我会及时和大家取得联系的！
0
投稿猜你喜欢
- 最近看Python看得都不用tab键了，哈哈。今天看了一个经典问题--八皇后问题，说实话，以前学C、C++的时候有这个问题，但是当时不爱学，
Python字符串拼接的几种方法整理第一种 通过加号(+)的形式print('第一种方式通过加号形式连接 ：' + '- 本文实例讲述了Django发送html邮件的方法。分享给大家供大家参考。具体如下：在Django中，发送邮件非常的方便，一直没有时间，今天来
- 重装电脑，在windows和虚拟机里面的Ubuntu里都安装了Pycharm专业版，安装的时候我都选择了vim插件，装好之后打开发现ctrl
- 如下所示：<div id="app"> <h1>我是直接写在构造器里的模板1</h1&g
- 本文介绍了在Python中使用gRPC的方法示例，分享给大家，具体如下：使用Protocol Buffers的跨平台RPC系统。安装使用 p
- 根据 Dotzler 的统计，IE6 的份额正在缩水，这可能是 2009 年本人听到的第一个好消息。于此同时，Gmail 的浏览器支持列表中
- 连接：mysql -h主机地址 -u用户名 －p用户密码 （注:u与root可以不用加空格，其它也一样） 断开：exit （回车） 创建授权
- 数据挖掘的过程中，数据进行处理是一重要的环节，我们往往会将其封装成一个方法，而有的时候这一个方法可能会被反复调用，每一次都对数据进行处理这将
- 在将自定义的网络权重加载到网络中时，报错：AttributeError: 'dict' object has no attr
- 如何快速的复制一张表首先创建一张表db1.t，并且插入1000行数据，同时创建一个相同结构的表db2.t假设，现在需要把db1.t里面的a&
- 假设有如下目录结构：-- dir0| file1.py| file2.py| dir3| file3.py| dir4| file4.pyd
- 缩进和SQL乱码及SQL包含变量1.在 PYCHARM 中只要 拉选块之后，按下tab键，整个块就会缩进，shift + tab
- Python 函数一、什么是模块化程序设计？在进行程序设计时将一个大程序按照功能划分为若干小程序模块每个小程序模块完成一个确定的功能并在这些
- 各位大哥： 在javascript中如何取整？比如： var
- 前言光流flow特征中包含了一个视频当中运动相关的信息，在视频动作定位当中光流特征使用的比较多，所以记录一下提取光流特征的方法。使用的方法是
- javascript中ele.getBoundingClientRect()：获取一个元素相对于浏览器视口的的坐标（无论父元素定位与否），返
- javascript/js的ajax的GET请求代码如下所示：<script type="text/javascript&q
- 【尊重原创，转载请注明出处】https://blog.csdn.net/guyuealian/article/details/7967225
- 前后端分离的开发模式，原本觉得没什么稀奇的玩艺，在最近参与的一个大型项目中，让我有了更深的理解。前后端分离的开发模式：系统分析阶段，系分和前
