JavaScript之实例练习（正反选、二级联动）

妖狐艹你老母 2023-03-13 11:49 10阅读 0赞

### 文章目录 ###

*   *   *   *  正反选案例
             *  二级联动案例

#### 正反选案例 ####

**1、使用的原理**

*  全选操作，就是遍历整个表格中的每一项，将checked设置为True
 *  取消则是将checked全变为false就行
 *  反选则是非原来的状态（原来选中，非就是不选中）

**2、练习代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>正反选</title>
    </head>
    <body>
    <button onclick="allSelect()">全选</button>
    <button onclick="cancel()">取消</button>
    <button onclick="reverse()">反选</button>
    
    
    <table border="2px">
        <tr>
            <td><input type="checkbox"></td>
            <td>培根</td>
            <td>鸡排套餐</td>
            <td>白开水</td>
        </tr>
    
        <tr>
            <td><input type="checkbox"></td>
            <td>牛肉饭</td>
            <td>鸡腿</td>
            <td>冰淇淋</td>
        </tr>
    
        <tr>
            <td><input type="checkbox"></td>
            <td>汉堡</td>
            <td>瘦肉粥</td>
            <td>奶茶</td>
        </tr>
    
        <tr>
            <td><input type="checkbox"></td>
            <td>鸡排</td>
            <td>薯条</td>
            <td>奶昔</td>
        </tr>
    </table>
    
    <script>
        function allSelect(){ 
            //全选操作，就是遍历整个表格中的每一项，将checked设置为True
            var inputs=document.getElementsByTagName("input");  //获取表格所有input元素
    
            for(var i=0; i<inputs.length; i++)
            { 
                inputs[i].checked=true;
            }
        }
    
        function cancel(){ 
            //取消则是将checked全变为false就行
            var inputs=document.getElementsByTagName("input");  //获取表格所有input元素
    
            for(var i=0; i<inputs.length; i++)
            { 
                inputs[i].checked=false;
            }
        }
    
        function reverse(){ 
    
            var inputs=document.getElementsByTagName("input");  //获取表格所有input元素
    
            for(var i=0; i<inputs.length; i++)
            { 
                //反选：就非原来的状态
                inputs[i].checked= !inputs[i].checked;
            }
    
        }
    </script>
    </body>
    </html>

**3、测试结果**  
![1][]  
*这样一个正反选案例就实现了*

#### 二级联动案例 ####

**1、原理分析**  
用onchange来动态改变区域内容  
通过索引来获取城市，然后将城市放到一个集合变量中  
最后遍历每个城市，将城市添加到对应的省份中

**2、练习代码**  
代码块中已经有非常详细的注释，所以看代码结合CSS内容才是最容易理解的：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>二级联动</title>
    </head>
    <body>
    
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    
    <select id="cities">
        <option>请选择城市</option>
    </select>
    <script>
        //通过js来动态添加省份和城市
    
        data={ "福建省":["莆田市","龙岩市","福州市","厦门市"],
            "河北省":["石家庄","保定","邯郸","廊坊"],
            "四川省":["成都市","绵阳市","德阳市","眉山市"]};
    
        var ele_pro=document.getElementById("province");
        var ele_cit=document.getElementById("cities");
    
        //可以用in来遍历，获得省份
        for(var i in data)
        { 
            // console.log(i);
            var ele=document.createElement("option");  //创建一个选项标签
            ele.innerHTML=i;  //在再将值添加进select中
            ele_pro.appendChild(ele);
        }
    
        //用onchange来动态改变区域内容
        ele_pro.onchange=function(){ 
            console.log(this.selectedIndex);  //获取选项的索引值
            console.log(this.options[this.selectedIndex]);  //将索引值代入省份选项中，即得到对应的城市
    
            //将获得的城市放到citys变量中
            var citys=data[this.options[this.selectedIndex].innerHTML]
    
            //为了防止城市的不断累加，需要在遍历省份之前将值都清除
            ele_cit.options.length=1;  //这里留了一个1，表示“请选择城市”该选项不清空
    
            //遍历每个城市，将城市添加到对应的省份中
            for(var i=0; i<citys.length; i++)
            { 
                var ele=document.createElement("option");  //创建选项框
                ele.innerHTML=citys[i];  //以城市名作为索引，将城市值打印到页面上
                ele_cit.appendChild(ele);  //添加进城市选择框里
            }
        }
    </script>
    </body>
    </html>

**3、测试结果**  
![2][]  
*这样一个二级联动的效果就出来了，当我们选择前面的省份时，第二个选项框就会变成对应省份的那些城市，实现动态的联动效果*

[1]: /images/20230312/d85360bd2aed49cdb2809443e17628aa.png
[2]: /images/20230312/9a225d2b1755404f9ce1c3416d045eda.png