[img]http://www.th7.cn/d/file/p/2012/10/13/8f09a23c2b5782be14dc26977f7e1de6.png[/img]
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>选择下拉菜单</title>
</head>
<BODY>
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width="40%">
<select style="WIDTH:100%" name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)" multiple="multiple">
<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:100%" name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)" multiple="multiple">
</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++){
if(e1.options[i].selected){
var e = e1.options[i];
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){
alert(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>
相关推荐
javascript 学习笔记
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
个人Javascript学习笔记 精华版 个人Javascript学习笔记 精华版 个人Javascript学习笔记 精华版
JavaScript学习笔记JavaScript学习笔记
html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...
JavaScript学习笔记归纳.pdf
javascript学习笔记,包括基本语法、面向对象、正则表达式、dom的所有操作
JavaScript-学习笔记
Java相关课程系列笔记之八JavaScript学习笔记 Java相关课程系列笔记之九Servlet学习笔记 Java相关课程系列笔记之十JSP学习笔记 Java相关课程系列笔记之十一Ajax学习笔记 Java相关课程系列笔记之十二jQuery学习笔记 ...
JavaScript学习笔记,javascript基础知识,基础语法整理.pdf
HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...
JS AngularJS 学习笔记 YouTube视频截图
Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习...
Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记
JavaScript学习笔记.pdf
详细的javascript学习笔记,DOM,BOM,AJAX等详细笔记!
LabVIEW学习笔记LabVIEW学习笔记LabVIEW学习笔记LabVIEW学习笔记LabVIEW学习笔记LabVIEW学习笔记
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习...