核心提示：两个选择框中国家的互换!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleTitle/titlestyleselect{width:100px;he...
两个选择框中国家的互换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select{width:100px;heigth:85px;}
p{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>
<p>
<button onclick="move(this)">>></button>
<button onclick="move(this)">></button>
<button onclick="move(this)"><</button>
<button onclick="move(this)"><<</button>
</p>
<select id="sel" size="5" multiple></select>
<script>
var unselArr=[],selArr=[];
(function(){
/*****************方法一*******************************/
/* //找到id为unsel的select元素，保存在unsel中
var unsel=document.getElementById("unsel");
unselArr=
//将unsel的innerHTML替换开始位置的\s*<option>为“”
unsel.innerHTML.replace(/^\s*<option>/,"")
//替换结束位置的<\/option>\s*为“”
.replace(/<\/option>\s*$/,"")
//按</option>\s*<option>切割
.split(/<\/option>\s*<option>/)*/
/*****方法二*****************************/
var unsel=document.getElementById("unsel");
var opts=unsel.getElementsByTagName("option");
for(var i=0;i<opts.length-1;i++){
unselArr.push(opts[i].innerHTML);
}
})();
function move(btn) {
switch (btn.innerHTML){
case">>":
//将unselArr拼接到selArr结尾
selArr=selArr.concat(unselArr);
unselArr=[];
break;
case"<<":
unselArr=unselArr.concat(selArr);
selArr=[];
break;
case">":
//找到unsel中所有option，保存到opts中
var opts=document.querySelectorAll("#unsel>option");
//i从opts.length-1开始，遍历opts中每个option
// 到0结束，每次递减一
for(var i=opts.length-1;i>=0;i--){
//如果当前opt的seleced属性有效
if(opts[i].selected){
// 将unselArr中i位置的元素删除，追加到selArr中
selArr.push(unselArr.splice(i,1)[0]);
}
}
break;
case"<":
//找到sel中所有option，保存到opts1中
var opts1=document.querySelectorAll("#sel>option");
//i从opts1.length-1开始，遍历opts1中每个option
// 到0结束，每次递减一
for(var i=opts1.length-1;i>=0;i--){
//如果当前opt的seleced属性有效
if(opts1[i].selected){
// 将unselArr中i位置的元素删除，追加到selArr中
unselArr.push(selArr.splice(i,1)[0]);
}
}
break;
}
selArr.sort();
unselArr.sort();
show();
}
function show(){//将每次移动后的两个数组join成HTML字符串，放到对应sel元素的内容中
//找到id为unsel的元素，保存到unsel中
var unsel=document.getElementById("unsel");
//如果unselArr的长度为0
if(unselArr.length==0){
// 就将unsel的内容设置为“”
unsel.innerHTML="";
}else{//否则，先拼unsel中的内容
unsel.innerHTML="<option>"+unselArr.join("</option><option>")+"</option>";
}
//找到id为sel的元素，保存到sel中
var sel=document.getElementById("sel");
//如果selArr的长度为0
if(selArr.length==0){
// 就将sel的内容设置为“”
sel.innerHTML="";
}else{//否则，先拼sel中的内容
sel.innerHTML="<option>"+selArr.join("</option><option>")+"</option>";
}
}
</script>
</body>
</html>
