两个选择框中国家的互换

最新推荐文章于 2021-06-03 01:47:08 发布

wth_xk

最新推荐文章于 2021-06-03 01:47:08 发布

阅读量301

点赞数

本文链接：https://blog.csdn.net/xingkong_333/article/details/73927604

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{width:100px;heigth: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 οnclick="move(this)">>></button>
    <button οnclick="move(this)">></button>
    <button οnclick="move(this)"><</button>
    <button οnclick="move(this)"><<</button>
</div>
<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>

wth_xk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两个选择框中国家的互换

Title select{width:100px;heigth:85px;} div{display:inline-block;width:50px} Argentina Brazil Canada Chile China Cuba Denmark Egypt Fran
复制链接

扫一扫