js案例之全选与下拉列表左右选择

1、js案例之全选
做出如图所示的选择功能

body内代码

<div id="select">
        <input type="checkbox" id="box1" onclick="selectAllNo();"/>全选/全不选
        <br>
        <input type="checkbox" name="love"/>basketball
        <input type="checkbox" name="love"/>baseball
        <br>
        <input type="button" value="全选" onclick="selectAll();"/>
        <input type="button" value="全不选" onclick="selectNo();"/>
        <input type="button" value="反选" onclick="selectOther();"/>
    </div>

js代码

    <script type="text/javascript">
        //全选
        function selectAll(){
            var input1 = document.getElementsByName("love");
            for(var i = 0;i<input1.length;i++){
                input1[i].checked = true;
            }
        }
        //全不选
        function selectNo(){
            var input1 = document.getElementsByName("love");
            for(var i = 0;i<input1.length;i++){
                input1[i].checked = false;
            }
        }
        //反选
        function selectOther(){
            var input1 = document.getElementsByName("love");
            for(var i = 0;i<input1.length;i++){
                input1[i].checked = (!input1[i].checked);
            }
        }
        //切换全选/全不选 复选框
        function selectAllNo() {
            var input1 = document.getElementById("box1");
            if(input1.checked===true) {
               selectAll();
            }
            else{
                selectNo();
            }
        }
    </script> 

2、js案例之下拉列表左右选择

下拉选择框

<select><option>1111</option></select>

选中添加到右边

1、获取select1里面的option（getElementByTagName）
2、得到select2
3、遍历option，判断option是否被选中
4、如果选中，使用appendChild把选择的添加到右边 

全部添加到右边

1、获取select1里面的option
2、得到select2
3、遍历option使用appendChild方法添加到select2下面

body内代码

<div style="display:inline-block;width:120px;">
        <select id="select1" multiple="multiple" style="width:100px;height: 200px;">
            <option>
                1111
            </option>
            <option>
                2222
            </option>
            <option>
                3333
            </option>
        </select>
        <div>
            <input type="button" value="选中添加到右边" onclick="selToRight();"/>
            <input type="button" value="全部添加到右边" onclick="allToRight();"/>
        </div>
    </div>

    <div style="width:120px;display: inline-block">
        <select id="select2" multiple="multiple" style="width:100px;height: 200px;">
            <option>
                4444
            </option>
            <option>
                5555
            </option>
            <option>
                6666
            </option>
        </select>
        <div>
            <input type="button" value="选中添加到左边" onclick="selToLeft();"/>
            <input type="button" value="全部添加到左边" onclick="allToLeft();"/>
        </div>
    </div>

js代码

    <script type="text/javascript">
        function selToRight() {
            //获取select1里面的option
            var sel1 = document.getElementById("select1");
            var opts = sel1.getElementsByTagName("option");
            //判断是否被选中 如果是选中使用appendChild添加到右边去
            var sel2 = document.getElementById("select2");
            for(var i = 0;i<opts.length;i++){
                if(opts[i].selected===true){
                    var opt = opts[i];
                    sel2.appendChild(opt);
                    i--;//appendChild让数组长度变短
                }
            }
        }

        function allToRight() {
            //获取select1里面的option
            var sel1 = document.getElementById("select1");
            var opts = sel1.getElementsByTagName("option");
            //使用appendChild添加到右边去
            var sel2 = document.getElementById("select2");
            var len = opts.length;
            for(var i = 0;i<len;i++){
                var opt = opts[0];
                sel2.appendChild(opt);
            }
        }

        function selToLeft() {
            //获取select2里面的option
            var sel2 = document.getElementById("select2");
            var opts = sel2.getElementsByTagName("option");
            //判断是否被选中 如果是选中使用appendChild添加到右边去
            var sel1 = document.getElementById("select1");
            for(var i = 0;i<opts.length;i++){
                if(opts[i].selected===true){
                    var opt = opts[i];
                    sel1.appendChild(opt);
                    i--;//appendChild让数组长度变短
                }
            }
        }

        function allToLeft() {
            //获取select2里面的option
            var sel2 = document.getElementById("select2");
            var opts = sel2.getElementsByTagName("option");
            //判断是否被选中 如果是选中使用appendChild添加到右边去
            var sel1 = document.getElementById("select1");
            var len = opts.length;
            for(var i = 0;i<len;i++){
                    var opt = opts[0];
                    sel1.appendChild(opt);
            }

        }
    </script>