<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css"><!--BODY{font-family:"Courier";font-size: 12px;margin:0px 0px 0px 0px;overflow-x:no;overflow-y:no;background-color: #B8D3F4;}td{font-size:12px;}.default_input{border:1px solid #666666;height:18px;font-size:12px;}.default_input2{border:1px solid #666666;height:18px;font-size:12px;}.nowrite_input{border:1px solid #849EB5;height:18px;font-size:12px;background-color:#EBEAE7;color: #9E9A9E;}.default_list{font-size:12px; border:1px solid #849EB5;}.default_textarea{font-size:12px;border:1px solid #849EB5;}.nowrite_textarea{border:1px solid #849EB5;font-size:12px;background-color:#EBEAE7;color: #9E9A9E;}.wordtd5 {font-size: 12px;text-align: center;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd {font-size: 12px;text-align: left;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd_1 {font-size: 12px;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #516CD6;color:#fff;}.wordtd_2{font-size: 12px;text-align: right;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #64BDF9;}.wordtd_3{font-size: 12px;text-align: right;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #F1DD34;}.inputtd{font-size:12px;vertical-align:top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.inputtd2{text-align: center;font-size:12px;vertical-align:top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.tablebg{font-size:12px;}.tb{border-collapse: collapse;border: 1px outset #999999;background-color: #FFFFFF;}.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}.td4{background-color:#F6F6F6;line-height:20px;}.td5{border:#000000 solid; border-right-width:0px; border-left-width:0px; border-top-width:0px; border-bottom-width:1px;}.tb td{font-size: 12px;border: 2px groove #ffffff;}.noborder {border: none;}.button {border: 1px ridge #ffffff;line-height:18px;height: 20px;width: 45px;padding-top: 0px;background:#CBDAF7;color:#000000;font-size: 9pt; font-family:"Courier";} .textarea {font-family: Arial, Helvetica, sans-serif, "??";font-size: 9pt;color: #000000;border-bottom-width: 1px;border-top-style: none;border-right-style: none;border-bottom-style: solid;border-left-style: none;border-bottom-color: #000000;background-color:transparent;text-align: left}--></style></head><body><div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"><table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"> <tr> <td width="126"> <!--multiple="multiple" 能同時選擇多個 size="10" 確定下拉選的長度--><select name="first" multiple="multiple" size=10 class="td3" id="s"> <option value="選項1">選項1</option> <option value="選項2">選項2</option> <option value="選項3">選項3</option> <option value="選項4">選項4</option> <option value="選項5">選項5</option> <option value="選項6">選項6</option> <option value="選項7">選項7</option> <option value="選項8">選項8</option></select> </td> <td width="69" valign="middle"> <input name="add" id="add" type="button" class="button" value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" /> <input name="remove" id="remove" type="button" class="button" value="<--" /> <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> </td> <td width="127" align="left"> <select name="second" size="10" multiple="multiple" class="td3" id="second"> <option value="選項9">選項9</option> </select></td> </tr></table></div></body><script type="text/javascript"> window.onload=function(){/*************************************************************************************************************/ //選中的從左端移到右端 //<input name="add" id="add" type="button" class="button" value="-->" /> document.getElementById("add").onclick=function(){ //擷取<select name="first" multiple="multiple" size=10 class="td3" id="first"> var firstElement=document.getElementById("first"); //擷取option var optionElements=firstElement.getElementsByTagName("option"); var len=optionElements.length; //alert(len)//擷取右邊<select name="second" size="10" multiple="multiple" class="td3" id="second"> var secondElement=document.getElementById("second");//遍曆option for(var i=0;i<len;i++){var optionElement=optionElements[i];/* * firstElement.selectedIndex: * * 表示當前選中的option的索引值,從0開始 * * 如果沒有被選中的，selectedIndex=-1 * * 如果有多個被選中,selectedIndex的值永遠是第一個被選中的值 * * javaScript的數組是動態數組,數組的長度是可變的,索引值也在變 */if (firstElement.selectedIndex != -1) { // alert(firstElement.selectedIndex); secondElement.appendChild(optionElements[firstElement.selectedIndex]);} } } //------------------------------------------------------------------- //全部移動 document.getElementById("add_all").onclick=function() { var firstElement=document.getElementById("first"); //擷取option var optionElements=firstElement.getElementsByTagName("option"); var len=optionElements.length; //alert(len)//擷取右邊<select name="second" size="10" multiple="multiple" class="td3" id="second"> var secondElement=document.getElementById("second");//遍曆option for(var i=0;i<len;i++){ secondElement.appendChild(optionElements[0]); } } //全部移動簡化的 /* document.getElementById("add_all").onclick=function() { var firstElement=document.getElementById("first"); var secondElement=document.getElementById("second"); var optionElements=firstElement.getElementsByTagName("option"); var len=firstElement.length;//遍曆option for(var i=0;i<len;i++){ secondElement.appendChild(optionElements[0]); } } */ //雙擊從左邊移動到右邊 /* document.getElementById("first").ondblclick=function() { var firstElement=document.getElementById("first"); var optionElements=firstElement.getElementsByTagName("option"); var secondElement=document.getElementById("second"); for(var i=0;i<optionElements.length;i++) { secondElement.appendChild(optionElements[firstElement.selectedIndex]); } } */ //雙擊右移簡化 document.getElementById("first").ondblclick=function() { var secondElement=document.getElementById("second"); secondElement.appendChild(this[this.selectedIndex]); } //選中的從右至左 document.getElementById("remove").onclick=function() { var secondElement=document.getElementById("second"); //擷取option var optionElements=secondElement.getElementsByTagName("option"); var len=optionElements.length; //alert(len)//擷取右邊<select name="second" size="10" multiple="multiple" class="td3" id="second"> var firstElement=document.getElementById("first");//遍曆option for(var i=0;i<len;i++){ if (secondElement.selectedIndex != -1) { firstElement.appendChild(optionElements[secondElement.selectedIndex]);} } }//全部的左移document.getElementById("remove_all").onclick=function() { var secondElement=document.getElementById("second"); var firstElement=document.getElementById("first"); var optionElements=secondElement.getElementsByTagName("option"); var len=secondElement.length;//遍曆option for(var i=0;i<len;i++){ firstElement.appendChild(optionElements[0]); } } //雙擊左移 document.getElementById("second").ondblclick=function() { var firstElement=document.getElementById("first"); firstElement.appendChild(this[this.selectedIndex]); } }</script></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
