DOM：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-"><title>DOM選項(xiàng)移動(dòng)操作</title><style>select {width: px;height: px;}div {display: inline-block;width: px}</style></head><body><select id="unsel" size="" multiple><option>Argentina</option><option>Brazil</option><option>Canada</option><option>Chile</option><option>China</option><option>Cuba</option><option>Denmark</option><option>Egypt</option><option>France</option><option>Greece</option><option>Spain</option></select><div><button onclick="move(this.innerHTML)">>></button><button onclick="move(this.innerHTML)">></button><button onclick="move(this.innerHTML)"><</button><button onclick="move(this.innerHTML)"><<</button></div><select id="sel" size="" multiple></select><script>function $(id){return document.getElementById(id);}var unsel=null;//保存所有備選國(guó)家列表var sel=[];//保存已選中的國(guó)家列表window.onload=function(){unsel=$("unsel").innerHTML.replace(/<//?option>/g," ").match(//b[a-zA-Z]+/b/g);}function move(inner){switch (inner){case ">>"://全部右移sel=sel.concat(unsel);unsel.length=;sel.sort();break;case "<<"://全部左移unsel=unsel.concat(sel);sel.length=;unsel.sort();break;case ">"://選中項(xiàng)右移var opts=document.querySelectorAll("#unsel option");//從后向前遍歷每個(gè)optionfor(var i=opts.length-;i>=;i--){if(opts[i].selected){//刪除unsel中i位置的個(gè)元素,直接壓入selsel.push(unsel.splice(i,)[]);}}sel.sort();break;case "<"://選中項(xiàng)左移var opts=document.querySelectorAll("#sel option");for(var i=opts.length-;i>=;i--){if(opts[i].selected){unsel.push(sel.splice(i,)[]);}}unsel.sort();break;}show();}function show(){//將兩個(gè)數(shù)組，更新到select元素中$("unsel").innerHTML="<option>"+unsel.join("</option><option>")+"</option>";$("sel").innerHTML="<option>"+sel.join("</option><option>")+"</option>";}</script></body></html>jquery:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-"><title>選項(xiàng)移動(dòng)操作</title><script src="jquery.min.js"></script><style>select {width: px;height: px;}div {display: inline-block;width: px}</style></head><body><select id="first" size="" multiple><option>Argentina</option><option>Brazil</option><option>Canada</option><option>Chile</option><option>China</option><option>Cuba</option><option>Denmark</option><option>Egypt</option><option>France</option><option>Greece</option><option>Spain</option></select><div><button id="add">></button><button id="add_all">>></button><button id="remove"><</button><button id="remove_all"><<</button></div><select id="second" size="" multiple></select><script>$("#add").click(function(){// 將左邊被選中的選項(xiàng),移到右邊去$("#first>option:selected").appendTo($("#second"));});$("#add_all").click(function(){$("#first>option").appendTo($("#second"));});$("#remove").click(function(){$("#second>option:selected").appendTo($("#first"));});$("#remove_all").click(function(){$("#second>option").appendTo($("#first"));});// 雙擊事件$("#first").dblclick(function(){$("#first>option:selected").appendTo($("#second"));});$("#second").dblclick(function(){$("#second>option:selected").appendTo($("#first"));});</script></body></html>以上所述是小編給大家介紹的DOM操作和jQuery實(shí)現(xiàn)選項(xiàng)移動(dòng)操作代碼分享的全部?jī)?nèi)容，希望對(duì)大家有所幫助！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
