Function Description: >;
Programming idea: separation of data and interface presentation (separation of data and structure)
1. Process the data on the left and store it in the predefined array unsel;
2. Define a method for data (array unsel, sel) processing and a method for interface display
Specific code native dom implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click zoom hidden, native dom Realization</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);
}
//Define two empty arrays, 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");
/*If the element is deleted during traversal, it is recommended to traverse from the back to the front*/
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>