Rumah > Artikel > hujung hadapan web > Gunakan Javascript untuk mengalih dan mengisih menu lungsur turun pilih_jquery

Gunakan Javascript untuk mengalih dan mengisih menu lungsur turun pilih_jquery

WBOYasal: 2016-05-16 15:14:191439semak imbas

Artikel ini akan memperkenalkan anda kepada penggunaan js untuk melaksanakan menu lungsur dengan pilihan untuk mengalih satu sama lain dan merealisasikan pengisihan menu Kod ini mudah dan mudah difahami serta mempunyai nilai rujukan pertama. Jika anda rasa berpuas hati, sila rujuk kod ini.

Kod adalah seperti berikut:

<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>

Semua orang berpuas hati dengan kod di atas untuk melaksanakan penggunaan Javascript untuk mengalih dan mengisih menu lungsur pilihan Jika anda mempunyai sebarang soalan tentang kod, sila berasa bebas untuk bertanya, dan saya akan menghubungi anda dalam masa!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara menggunakan PHP+jQuery+MySQL untuk memuatkan data peta ECharts secara tidak segerak (dengan muat turun kod sumber)_jqueryArtikel seterusnya：Cara menggunakan PHP+jQuery+MySQL untuk memuatkan data peta ECharts secara tidak segerak (dengan muat turun kod sumber)_jquery

Artikel berkaitan

Lihat lagi