三个需求小练习

最新推荐文章于 2023-01-29 12:45:42 发布

一只极度渴望成长的Giser

最新推荐文章于 2023-01-29 12:45:42 发布

阅读量229

点赞数

分类专栏： Javascript、JQuery练习文章标签：三个需求小练习

本文链接：https://blog.csdn.net/qq_32077521/article/details/99578204

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        #sel1 {
            width: 100px;
            height: 120px;
        }

        #sel2 {
            width: 100px;
            height: 120px;
        }
    </style>
    <ul id="ul1">
        <li><input type="checkbox" id="ckb1" />爱不解释</li>
        <li><input type="checkbox" id="ckb2" /> 他不懂</li>
        <li><input type="checkbox" id="ckb3" />天下</li>
        <li><input type="checkbox" id="ckb4" />剑心</li>
    </ul>
    <input type="button" value="全选" id="btnAllSelect" />
    <input type="button" value="全不选" id="btnNotAllSelect" />
    <input type="button" value="反选" id="btnBackSelect" />
    <br /><br /><br /><br />
    省：
    <select id="selProvince"></select>
    市：
    <select id="selCity"></select>
    <br /><br /><br /><br />
    <select id="sel1" multiple="multiple">
        <option>山东</option>
        <option>广东</option>
        <option>山西</option>
        <option>陕西</option>
        <option>河南</option>
    </select>
    <input type="button" id="moveAllToRight" value=">>" />
    <input type="button" id="moveSelectedToRight" value=">" />
    <input type="button" id="moveSelectedToLeft" value="<" />
    <input type="button" id="moveAllToLeft" value="<<" />
    <select id="sel2" multiple="multiple"></select>
    <script type="text/javascript">
        window.onload = function () {
            //第一个练习，全选，全不选，反选
            //为全选按钮注册单击事件
            document.getElementById('btnAllSelect').onclick = function () {
                for (var i = 0; i < document.getElementById('ul1').getElementsByTagName('input').length; i++) {
                    document.getElementById('ul1').getElementsByTagName('input')[i].checked = true;
                }
            };
            //为全部选按钮注册单击事件
            document.getElementById('btnNotAllSelect').onclick = function () {
                for (var i = 0; i < document.getElementById('ul1').getElementsByTagName('input').length; i++) {
                    document.getElementById('ul1').getElementsByTagName('input')[i].checked = false;
                }
            };
            //为反选按钮注册单击事件
            document.getElementById('btnBackSelect').onclick = function () {
                for (var i = 0; i < document.getElementById('ul1').getElementsByTagName('input').length; i++) {
                    if (document.getElementById('ul1').getElementsByTagName('input')[i].checked == true) {
                        document.getElementById('ul1').getElementsByTagName('input')[i].checked = false;
                    }
                    else {
                        document.getElementById('ul1').getElementsByTagName('input')[i].checked = true;
                    }
                }
            };

            //第二个练习，省市选择
            var data = {
                "山东": ["济南", "青岛", "泰安"],
                "广东": ["东山", "东莞", "汕头"],
                "山西": ["太远", "大同", "运城"]
            };
            for (var key in data) {
                var optionObj = document.createElement('option');
                optionObj.innerText = key;
                document.getElementById('selProvince').appendChild(optionObj);
            }
            document.getElementById('selProvince').onchange = function () {
                //首先清空元素
                while (document.getElementById('selCity').hasChildNodes()) {
                    document.getElementById('selCity').removeChild(document.getElementById('selCity').firstChild);
                }
                //得到当前的省份名称
                var provinceName = this.selectedOptions[0].innerText;
                //得到当前省份名称的所有城市名称列表
                var cities = data[provinceName];
                //动态创建元素，添加城市
                for (var i = 0; i < cities.length; i++) {
                    var optionObj = document.createElement('option');
                    optionObj.innerHTML = cities[i];
                    document.getElementById('selCity').appendChild(optionObj);
                }
            };
            //手动触发一次下拉列表的change事件
            document.getElementById('selProvince').onchange();

            //练习三
            //为四个按钮注册单击事件
            document.getElementById('moveAllToRight').onclick = function () {
                moveAll(document.getElementById('sel1'), document.getElementById('sel2'));
            };
            document.getElementById('moveAllToLeft').onclick = function () {
                moveAll(document.getElementById('sel2'), document.getElementById('sel1'));
            };
            document.getElementById('moveSelectedToRight').onclick = function () {
                moveSelected(document.getElementById('sel1'), document.getElementById('sel2'));                
            };
            document.getElementById('moveSelectedToLeft').onclick = function () {
                moveSelected(document.getElementById('sel2'), document.getElementById('sel1'));
            };
        };
        //定义一个方法，将全部的移到另一边
        function moveAll(sel1, sel2) {
            //为了能够将所有的元素全部按照原来顺序移动到另一半，所以用了倒序循环，并且用了insertBefore()进行追加子元素
            for (var i = sel1.getElementsByTagName('option').length-1; i >=0 ; i--) {
                var optionObj = sel1.getElementsByTagName('option')[i];
                sel2.insertBefore(optionObj, sel2.firstChild);
            }
        }
        //定义一个方法，将选中的移到另一边
        function moveSelected(sel1,sel2) {
            for (var i = sel1.selectedOptions.length - 1; i >= 0; i--) {
                var optionObj = sel1.selectedOptions[i];
                sel2.insertBefore(optionObj, sel2.firstChild);
            }
        }
    </script>
</body>
</html>