select中读取并修改元素的内容小案例

功能说明：>>：把左边的数据全部移到右边，左边清空；<<：把右边的数据全部移到左边，右边清空；>：选择左边的某一项或者多项移动到右边，左边选中项删除；<：选择右边的某一项或者多项移动到左边，右边选中项删除；

编程思想：数据和界面展示分离（数据和结构分离）

1.把左边的数据处理一下存放入预定义的数组unsel中；

2.定义一个方法用于数据（数组unsel，sel）处理，一个方法用于界面的展示

具体代码原生dom实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单击伸缩隐藏，原生dom实现</title>
    <style>
        #div1,#div3 {
            width: 90px;
            height: 100px;
            float: left;
        }
        #div2 {
            width: 32px;
            height: 100px;
            background-color: bisque;
            float: left;
        }
        button {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <select id="div1" 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 id="div2">
        <button onclick="move(this)">&gt;&gt;</button>
        <button onclick="move(this)">&gt;</button>
        <button onclick="move(this)">&lt;</button>
        <button onclick="move(this)">&lt;&lt;</button>

    </div>
    <select id="div3" size="5" multiple></select>
    <script>
        window.$ = HTMLElement.prototype.$ = function(selector){
            return (this == window?document:this).querySelectorAll(selector);
        }
        //定义两个空数组，sel，unsel
        var sel = [],unsel = [];
        var unsel = $("#div1")[0].innerHTML.trim().slice(8,-9).split(/<\/option>\s*<option>/);

        function move(btn){
            if (btn.innerHTML == "&gt;&gt;"){
                sel = sel.concat(unsel);
                sel.sort();
                unsel = [];
            }else if (btn.innerHTML == "&lt;&lt;"){
                unsel = unsel.concat(sel);
                unsel.sort();
                sel = [];
            }else if (btn.innerHTML == "&gt;"){
                var opts = $("#div1 option");
                /*如果在遍历过程中有删除元素，建议从后向前遍历*/
                for (var i=opts.length-1;i>=0;i--){
                    if (opts[i].selected){
                        sel.push(unsel.splice(i,1)[0]);
                    }
                }
                sel.sort();
            }else {
                var opts = $("#div3 option");
                for (var i=opts.length-1;i>=0;i--){
                    if(opts[i].selected){
                        unsel.push(sel.splice(i,1)[0]);
                    }
                }
                unsel.sort();
            }
            updata();
        }
        function updata(){
            $("#div1")[0].innerHTML = "<option>"+unsel.join("</option><option>")+"</option>";
            $("#div3")[0].innerHTML = "<option>"+sel.join("</option><option>")+"</option>";
        }
    </script>
</body>
</html>

select中读取并修改元素的内容小案例

猜你喜欢