全面解析DOM操作和jQuery实现选项移动操作代码分享

前端技术 2023/09/09 JavaScript

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\");
//从后向前遍历每个option
for(var i=opts.length-;i>=;i--){
if(opts[i].selected){
//删除unsel中i位置的个元素,直接压入sel
sel.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实现选项移动操作代码分享的全部内容，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/23409

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案