Of Stack

Comprehensive analysis of DOM operation and jQuery implementation option mobile operation code sharing

  • 2021-06-28 06:12:48
  • OfStack

DOM: 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>DOM Option move action 
 </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;// Save a list of all alternative countries 
 
var sel=[];// Save the list of selected countries 
 
window.onload=function(){
unsel=$("unsel").innerHTML
.replace(/<\/?option>/g," ")
.match(/\b[a-zA-Z]+\b/g);
}
function move(inner){
switch (inner){
case "&gt;&gt;":// Move all to the right 
 
sel=sel.concat(unsel);
unsel.length=;
sel.sort();
break;
case "&lt;&lt;":// Move all to the left 
 
unsel=unsel.concat(sel);
sel.length=;
unsel.sort();
break;
case "&gt;":// Move the selected item to the right 
 
var opts=document.querySelectorAll("#unsel option");
// Traverse each from back to front 
 option
for(var i=opts.length-;i>=;i--){
if(opts[i].selected){
// Delete 
 unsel Medium 
 i Elements of the position 
 , Direct press-in 
 sel
sel.push(unsel.splice(i,)[]);
}
}
sel.sort();
break;
case "&lt;":// Move the selected item to the left 
 
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(){// Update two arrays to the 
 select Element 
 
$("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> Option move action 
 </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">&gt;</button>
<button id="add_all">&gt;&gt;</button>
<button id="remove">&lt;</button>
<button id="remove_all">&lt;&lt;</button>
</div>
<select id="second" size="" multiple>
</select>
<script>
$("#add").click(function(){
//  Will the selected option on the left 
 , Move to the right 
 
$("#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"));
});
//  Double-click event 
 
$("#first").dblclick(function(){
$("#first>option:selected").appendTo($("#second"));
});
$("#second").dblclick(function(){
$("#second>option:selected").appendTo($("#first"));
});
</script>
</body>
</html>

The above is the site to introduce the DOM operation and jQuery implementation options mobile operation code sharing of all the content, I hope to help you!

Related articles: