DOM操作和jQuery实现选项移动操作的简单实例
DOM：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>DOM选项移动操作</title>
<style>
select{
width:100px;
height:85px;
}
div{
display:inline-block;
width:50px
}
</style>
</head>
<body>
<selectid="unsel"size="5"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>
<buttononclick="move(this.innerHTML)">>></button>
<buttononclick="move(this.innerHTML)">></button>
<buttononclick="move(this.innerHTML)"><</button>
<buttononclick="move(this.innerHTML)"><<</button>
</div>
<selectid="sel"size="5"multiple>
</select>
<script>
function$(id){
returndocument.getElementById(id);
}
varunsel=null;//保存所有备选国家列表
varsel=[];//保存已选中的国家列表
window.onload=function(){
unsel=$("unsel").innerHTML
.replace(/<\/?option>/g,"")
.match(/\b[a-zA-Z]+\b/g);
}
functionmove(inner){
switch(inner){
case">>"://全部右移
sel=sel.concat(unsel);
unsel.length=0;
sel.sort();
break;
case"<<"://全部左移
unsel=unsel.concat(sel);
sel.length=0;
unsel.sort();
break;
case">"://选中项右移
varopts=document.querySelectorAll("#unseloption");
//从后向前遍历每个option
for(vari=opts.length-1;i>=0;i--){
if(opts[i].selected){
//删除unsel中i位置的1个元素,直接压入sel
sel.push(unsel.splice(i,1)[0]);
}
}
sel.sort();
break;
case"<"://选中项左移
varopts=document.querySelectorAll("#seloption");
for(vari=opts.length-1;i>=0;i--){
if(opts[i].selected){
unsel.push(sel.splice(i,1)[0]);
}
}
unsel.sort();
break;
}
show();
}
functionshow(){//将两个数组，更新到select元素中
$("unsel").innerHTML="<option>"
+unsel.join("</option><option>")
+"</option>";
$("sel").innerHTML="<option>"
+sel.join("</option><option>")
+"</option>";
}
</script>
</body>
</html>
jquery:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>选项移动操作</title>
<scriptsrc="jquery.min.js"></script>
<style>
select{
width:100px;
height:85px;
}
div{
display:inline-block;
width:50px
}
</style>
</head>
<body>
<selectid="first"size="5"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>
<buttonid="add">></button>
<buttonid="add_all">>></button>
<buttonid="remove"><</button>
<buttonid="remove_all"><<</button>
</div>
<selectid="second"size="5"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实现选项移动操作的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。