功能说明:>>:把左边的数据全部移到右边,左边清空;<<:把右边的数据全部移到左边,右边清空;>:选择左边的某一项或者多项移动到右边,左边选中项删除;<:选择右边的某一项或者多项移动到左边,右边选中项删除;
编程思想:数据和界面展示分离(数据和结构分离)
1.把左边的数据处理一下存放入预定义的数组unsel中;
2.定义一个方法用于数据(数组unsel,sel)处理,一个方法用于界面的展示
具体代码原生dom实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击伸缩隐藏,原生dom实现</title>
<style>
#div1,#div3 {
width: 90px;
height: 100px;
float: left;
}
#div2 {
width: 32px;
height: 100px;
background-color: bisque;
float: left;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<select id="div1" 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 id="div2">
<button onclick="move(this)">>></button>
<button onclick="move(this)">></button>
<button onclick="move(this)"><</button>
<button onclick="move(this)"><<</button>
</div>
<select id="div3" size="5" multiple></select>
<script>
window.$ = HTMLElement.prototype.$ = function(selector){
return (this == window?document:this).querySelectorAll(selector);
}
//定义两个空数组,sel,unsel
var sel = [],unsel = [];
var unsel = $("#div1")[0].innerHTML.trim().slice(8,-9).split(/<\/option>\s*<option>/);
function move(btn){
if (btn.innerHTML == ">>"){
sel = sel.concat(unsel);
sel.sort();
unsel = [];
}else if (btn.innerHTML == "<<"){
unsel = unsel.concat(sel);
unsel.sort();
sel = [];
}else if (btn.innerHTML == ">"){
var opts = $("#div1 option");
/*如果在遍历过程中有删除元素,建议从后向前遍历*/
for (var i=opts.length-1;i>=0;i--){
if (opts[i].selected){
sel.push(unsel.splice(i,1)[0]);
}
}
sel.sort();
}else {
var opts = $("#div3 option");
for (var i=opts.length-1;i>=0;i--){
if(opts[i].selected){
unsel.push(sel.splice(i,1)[0]);
}
}
unsel.sort();
}
updata();
}
function updata(){
$("#div1")[0].innerHTML = "<option>"+unsel.join("</option><option>")+"</option>";
$("#div3")[0].innerHTML = "<option>"+sel.join("</option><option>")+"</option>";
}
</script>
</body>
</html>