<HTML>
<HEAD>
<TITLE>
選擇下拉菜單
</TITLE>
<META NAME="Description" CONTENT="Power by hill">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<BODY>
<p>
選定一項或多項然後點擊添加或移除(按住shift或ctrl可以多選)，或在選擇項上雙擊進行添加和移除。
</p>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width="40%">
<select style="WIDTH:100%" multiple name="list1" size="12" οndblclick="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>
</select>
</td>
<td width="20%" align="center">
<input type="button" value="添加" οnclick="moveOption(document.myform.list1, document.myform.list2)">
<br/>
<br/>
<input type="button" value="刪除" οnclick="moveOption(document.myform.list2, document.myform.list1)">
</td>
<td width="40%">
<select style="WIDTH:100%" multiple name="list2" size="12" οndblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
<td>
<button οnclick="changepos(list2,-1)" type="button">
上移
</button>
<br/>
<button οnclick="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++) {
if (e1.options[i].selected) {
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
ii = 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))
}
}
}
</script>
</BODY>
</HTML>下拉框內容左右移動效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
摺疊面板，類似於二級目錄的效果，純css編寫
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <style type="text/css">
四種方案實現CSS兩欄佈局
實現兩欄佈局：左側定寬，右側自適應 html： <html> <head> </head> <body> <div class="container"> <div class="left">LEFT