凹丫丫网络社区 » 【网页编程】 » 选择下拉菜单(SELECT)

Amm 发表于 2008-5-14 18:49

选择下拉菜单(SELECT)

&lt;HTML&gt;<BR><BR>&lt;HEAD&gt;<BR><BR>&lt;TITLE&gt;选择下拉菜单－<A href="http://www.51windows.net%3c/TITLE"><FONT color=#af5d49>www.51windows.Net&lt;/TITLE</FONT></A>&gt;<BR><BR>&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;<BR><BR>&lt;META NAME="Description" CONTENT="Power by 51windows.Net"&gt;<BR><BR>&lt;/HEAD&gt;<BR><BR>&lt;BODY&gt;<BR><BR>&lt;p&gt;选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。&lt;/p&gt;<BR><BR>&lt;form method="post" name="myform"&gt;<BR><BR>&nbsp;&nbsp; &lt;table border="0" width="300"&gt;<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="40%"&gt;<BR><BR>&nbsp;&nbsp; &lt;select style="width:100%;" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)"&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="北京"&gt;北京&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="上海"&gt;上海&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="山东"&gt;山东&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="安徽"&gt;安徽&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="重庆"&gt;重庆&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="福建"&gt;福建&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="甘肃"&gt;甘肃&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="广东"&gt;广东&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="广西"&gt;广西&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="贵州"&gt;贵州&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="海南"&gt;海南&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="河北"&gt;河北&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="黑龙江"&gt;黑龙江&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="河南"&gt;河南&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="湖北"&gt;湖北&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="湖南"&gt;湖南&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="内蒙古"&gt;内蒙古&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="江苏"&gt;江苏&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="江西"&gt;江西&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="吉林"&gt;吉林&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="辽宁"&gt;辽宁&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="宁夏"&gt;宁夏&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="青海"&gt;青海&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="山西"&gt;山西&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="陕西"&gt;陕西&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="四川"&gt;四川&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="天津"&gt;天津&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="西藏"&gt;西藏&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="新疆"&gt;新疆&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="云南"&gt;云南&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="浙江"&gt;浙江&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="香港"&gt;香港&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="澳门"&gt;澳门&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="台湾"&gt;台湾&lt;/option&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;option value="其他"&gt;其他&lt;/option&gt;<BR><BR>&nbsp;&nbsp; &lt;/select&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;/td&gt;<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="20%" align="center"&gt;<BR><BR>&nbsp;&nbsp; &lt;input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"&gt;&lt;br&gt;&lt;br&gt;<BR><BR>&nbsp;&nbsp; &lt;input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)"&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;/td&gt;<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="40%"&gt;<BR><BR>&nbsp;&nbsp; &lt;select style="width:100%;" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)"&gt;<BR><BR>&nbsp;&nbsp; &lt;/select&gt;<BR><BR>&nbsp;&nbsp;&nbsp; &lt;/td&gt;<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt;<BR><BR>&nbsp;&nbsp; &lt;/table&gt;<BR><BR>值：&lt;input type="text" name="city" size="40" value="" /&gt;<BR><BR>&lt;/form&gt;<BR><BR>&lt;script language="JavaScript"&gt;<BR><BR>&lt;!--<BR><BR>function moveOption(e1, e2){<BR><BR>try{<BR><BR>&nbsp;&nbsp; for(var i=0;i&lt;e1.options.length;i++){<BR><BR>&nbsp;&nbsp;&nbsp; if(e1.options[i].selected){<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp; var e = e1.options[i];<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp; e2.options.add(new Option(e.text, e.value));<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp; e1.remove(i);<BR><BR>&nbsp;&nbsp;&nbsp;&nbsp; i=i-1<BR><BR>&nbsp;&nbsp;&nbsp; }<BR><BR>&nbsp;&nbsp; }<BR><BR>&nbsp;&nbsp; document.myform.city.value=getvalue(document.myform.list2);<BR><BR>}<BR><BR>catch(e){}<BR><BR>}<BR><BR>function getvalue(geto){<BR><BR>var allvalue = "";<BR><BR>for(var i=0;i&lt;geto.options.length;i++){<BR><BR>&nbsp;&nbsp; allvalue +=geto.options[i].value + ",";<BR><BR>}<BR><BR>return allvalue;<BR><BR>}<BR><BR>//--&gt;<BR><BR>&lt;/script&gt;<BR><BR>&lt;/BODY&gt;<BR><BR>&lt;/HTML&gt;

查看完整版本: 选择下拉菜单(SELECT)