DOM：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-"><title>DOM选项移动操作</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;//保存所有备选国家列表var sel=[];//保存已选中的国家列表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 ">"://选中项右移var opts=document.querySelectorAll("#unsel option");//从后向前遍历每个optionfor(var i=opts.length-;i>=;i--){if(opts[i].selected){//删除unsel中i位置的个元素,直接压入selsel.push(unsel.splice(i,)[]);}}sel.sort();break;case "<"://选中项左移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(){//将两个数组，更新到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>选项移动操作</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(){// 将左边被选中的选项,移到右边去$("#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实现选项移动操作代码分享的全部内容，希望对大家有所帮助！
新闻热点
疑难解答
