dom04选好友

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>