04-13-17
<script>
function my$(id) {
return document.getElementById(id);
}
var btn1 = my$("btn1");
btn1.onclick = function () {
var sel = my$("sel");
var all = my$("all");
sel.innerHTML += all.innerHTML;
all.innerHTML = "";
}
var btn2 = my$("btn2");
btn2.onclick = function () {
var all = my$("all");
var sel = my$("sel");
all.innerHTML += sel.innerHTML;
sel.innerHTML = "";
};
var btn3 = my$("btn3");
btn3.onclick = function () {
var all = my$("all");
var sel = my$("sel");
var options = all.children;
for (var i = 0; i < options.length; i++) {
var option = options[i];
if (option.selected) {
sel.appendChild(option);
i--;
}
}
};
var btn4 = my$("btn4");
btn4.onclick = function () {
var all = my$("all");
var sel = my$("sel");
var options = sel.children;
for (var i = 0; i < options.length; i++) {
var option = options[i];
if (option.selected) {
all.appendChild(option);
i--;
}
}
};
</script>
函数封装:
<script>
//函数封装
//函数内传参数(从哪来source,到哪去destination,)
/*function moveAll(sour,dest){
var options =sour.children;//左边所有的子元素
for (var i = 0; i < options.length;i++ ) {
var option= options[i];
dest.appendChild(option);
i--;
};
}
function moveSelect(sour,dest){
var options =sour.children;//左边所有的子元素
for (var i = 0; i < options.length;i++ ) {
var option= options[i];
if (option.selected) {
left.appendChild(option);
i--;
};
}*/
function $(id) {
return document.getElementById(id);
}
var btn1=$("btn1");
var btn2=$("btn2");
var btn3=$("btn3");
var btn4=$("btn4");
var left=$("left");
var right=$("right");
btn1.onclick=function () {
move(left,right,true);
}
btn2.onclick=function () {
move(right,left,true);
}
btn3.onclick=function () {
move(left,right,false);
}
btn4.onclick=function () {
move(right,left,false);
}
//封装
function move(sour,dest,isMoveAll){
var options =sour.children;//所有的子元素
for (var i = 0; i < options.length;i++ ) {
var option= options[i];
if (isMoveAll ||option.selected) {
left.appendChild(option);
i--;
};
}
</script>