DDR爱好者之家

全面解析DOM操作和jQuery实现选项移动操作代码分享
站长资源 2024/11/29 佚名
79 1538
DDR爱好者之家 Design By 杰米

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)">&gt;&gt;</button>
<button onclick="move(this.innerHTML)">&gt;</button>
<button onclick="move(this.innerHTML)">&lt;</button>
<button onclick="move(this.innerHTML)">&lt;&lt;</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(/<\/" ")
.match(/\b[a-zA-Z]+\b/g);
}
function move(inner){
switch (inner){
case "&gt;&gt;"://全部右移
sel=sel.concat(unsel);
unsel.length=;
sel.sort();
break;
case "&lt;&lt;"://全部左移
unsel=unsel.concat(sel);
sel.length=;
unsel.sort();
break;
case "&gt;"://选中项右移
var opts=document.querySelectorAll("#unsel option");
//从后向前遍历每个option
for(var i=opts.length-;i>=;i--){
if(opts[i].selected){
//删除unsel中i位置的个元素,直接压入sel
sel.push(unsel.splice(i,)[]);
}
}
sel.sort();
break;
case "&lt;"://选中项左移
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="/UploadFiles/2021-04-02/jquery.min.js">


以上所述是小编给大家介绍的DOM操作和jQuery实现选项移动操作代码分享的全部内容，希望对大家有所帮助！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米