兩個select多選模式的選項相互移動

來源:互聯網
上載者:User

 本篇文章主要是對兩個select多選模式的選項相互移動範例程式碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所協助

如下所示:  代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><script type="text/javascript">function copyToList(from,to){     var fromList=eval('document.forms[0].'+from);    var toList=eval('document.forms[0].'+to);     if(toList.options.length > 0 && toList.options[0].value == 'temp'){            toList.options.length=0;    }     var sel=false;     for(i = 0;i < fromList.options.length;i++){        var current=fromList.options[i];        if(current.selected){            sel=true;            if(current.value=='temp'){                alert('不能選擇這個項目!');                return;            }            txt=current.text;            val=current.value;            toList.options[toList.length]=new Option(txt,val);            fromList.options[i]=null;            i--;        }    }     if(!sel) alert('你還沒有選擇任何項目!');} function allSelect(){        var chsen=document.getElementById('chosen');    //如果chsen列表框為0或第一個選項值為'temp'    if(chsen.length && chsen.options[0].value=="temp")        return;     for(var i=0;i<chsen.length;i++){            chsen.options[i].selected=true;    } //得到資料 function getdata() {            var List = document.forms[0].RoleList;       //得到一個隱藏文字框對象            var roles = document.getElementById("TRoleList");            roles.value = "";            var s = "";            if (List.length != 0) {                for (i = 0; i < List.length; i++) {                    s += List.options[i].value + ",";                }            }             roles.value = s;        }}</script></head><body><table border="0"><form onSubmit="allSelect()">   <tr>   <td>   <select name="possible" size="4" MULTIPLE width="200" style="width:200px">   <option value="1">中國廣州</option><option value="2">中國上海</option><option value="3">中國北京</option>   <option value="4">中國武漢</option> </select>   </td>   <td><a href="javascript:copyToList('possible','chosen')">添加至右方--><br>   <br></a><a href="javascript:copyToList('chosen','possible')"><--添加至左方</a></td>   <td>   <select name="chosen"   size="4" MULTIPLE  width="200"  style="width:200px;">   <option value="temp">從左邊選擇你的地區</option> </select>   </td>   </tr></form>   </table><input type="button"  value="提交"  onclick="allSelect()" />yle<input type="text" style="display:none;" id="TRoleList"></body></html>
相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。