使用Javascript实现选择下拉菜单互移并排序

前端技术 2023/09/07 JavaScript

本文给大家介绍使用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实现选择下拉菜单互移并排序的相关内容大家还很满意吧，代码有问题欢迎提出，我会及时和大家取得联系的！

本文地址：https://www.stayed.cn/item/18298

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案