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

文章目录

正反选案例
二级联动案例

正反选案例

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、原理分析
用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、测试结果

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

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

文章目录

正反选案例

二级联动案例

猜你喜欢