jQuery實(shí)現(xiàn)的仿百度分頁(yè)足跡效果代碼
622
2024-03-22
DOM：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM選項(xiàng)移動(dòng)操作</title>
<style>
select {
width: 100px;
height: 85px;
}
div {
display: inline-block;
width: 50px
}
</style>
</head>
<body>
<select id="unsel" 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>
<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="5" multiple>
</select>
<script>
function $(id){
return document.getElementById(id);
}
var unsel=null;//保存所有備選國(guó)家列表
var sel=[];//保存已選中的國(guó)家列表
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=0;
sel.sort();
break;
case "<<"://全部左移
unsel=unsel.concat(sel);
sel.length=0;
unsel.sort();
break;
case ">"://選中項(xiàng)右移
var opts=document.querySelectorAll("#unsel option");
//從后向前遍歷每個(gè)option
for(var i=opts.length-1;i>=0;i--){
if(opts[i].selected){
//刪除unsel中i位置的1個(gè)元素,直接壓入sel
sel.push(unsel.splice(i,1)[0]);
}
}
sel.sort();
break;
case "<"://選中項(xiàng)左移
var opts=document.querySelectorAll("#sel option");
for(var i=opts.length-1;i>=0;i--){
if(opts[i].selected){
unsel.push(sel.splice(i,1)[0]);
}
}
unsel.sort();
break;
}
show();
}
function show(){//將兩個(gè)數(shù)組，更新到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-8">
<title>選項(xiàng)移動(dòng)操作</title>
<script src="http://www.gimoo.net/t/1902/jquery.min.js"></script>
<style>
select {
width: 100px;
height: 85px;
}
div {
display: inline-block;
width: 50px
}
</style>
</head>
<body>
<select id="first" 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>
<button id="add">></button>
<button id="add_all">>></button>
<button id="remove"><</button>
<button id="remove_all"><<</button>
</div>
<select id="second" size="5" multiple>
</select>
<script>
$("#add").click(function(){
// 將左邊被選中的選項(xiàng),移到右邊去
$("#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實(shí)現(xiàn)選項(xiàng)移動(dòng)操作的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持綠夏網(wǎng)。
