两个选择框中国家的互换

<!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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值