使用JavaScript简单实现三级联动

程序员文章站 2022-03-09 17:50:08

...

在实际的JavaScript项目开发中，我们经常需要三级联动，比如省市区的选择，商品的三级分类的选择等等。我们今天就来讲解一下JavaScript实现三级联动，还有JavaScript源码分享给大家哦！不太熟悉JavaScript实现三级联动的可以和我们一起看看！

知识点：

1. json.parse() 将json格式字符串转换成对象。json.stringify()将对象转换成json格式字符串。

2. 重要属性selectedIndex：返回下拉列表的被选选项的索引号。

3. onchange事件

下面是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
    <select id="province">
        <!-- <option>北京</option>
        <option>天津</option> -->
    </select>
    <select id="city"></select>
    <select id="count"></select>
    <script type="text/javascript" src="china.js"></script>
    <script type="text/javascript">
    var province = document.getElementById("province");
    var city = document.getElementById("city");
    var count = document.getElementById("count");

    var chinaArea = JSON.parse(chinaArea);//将字符串格式的json数据转换成对象
    // var chinaArea = eval("("+chinaArea+")");
    // var chinaArea = new Function("return " + chinaArea)();

    //1.遍历省份
    var provinceList = chinaArea.china.province;//数组
    for(var i = 0 ; i < provinceList.length; i++) {
        var option = document.createElement("option");
        option.innerHTML = provinceList[i]["-name"];
        province.appendChild(option);
    }

    province.onchange = function() {
        //选择省份之后，市区跟着变化
        cityData();
        countData();
    }
    cityData();
    //市区的数据填充
    var sIndex = 0;
    var cityIndex = 0;
    function cityData() {
        //清除原来的市区信息
        city.innerHTML = "";
        //2.遍历市区
        sIndex = province.selectedIndex;//设置或返回下拉列表备选选项的索引号。
        for(var j = 0; j < provinceList[sIndex].city.length;j++) {
            var option = document.createElement("option");
            option.innerHTML = provinceList[sIndex].city[j]["-name"];
            city.appendChild(option);
        }
    }

    //县区数据填充

    function countData() {
        //清除原来的县区信息
        count.innerHTML = "";

        // 
        cityIndex = city.selectedIndex;
        var countList = chinaArea.china.province[sIndex].city[cityIndex].county; 
        for(var k = 0; k < countList.length; k++) {
            var option = document.createElement("option");
            option.innerHTML = countList[k]["-name"];
            count.appendChild(option);
        }
    }

    city.onchange = function() {
        countData();
    }
    countData();
    </script>
</body>
</html>

大家可以结合源码和知识点看看！尝试着自己写写，加强一下自己的知识面！

相关推荐：

js实现省市区三级联动插件分享

jQuery三级联动效果实现方法

以上就是使用JavaScript简单实现三级联动的详细内容，更多请关注其它相关文章！

使用JavaScript简单实现三级联动

使用 Jquery+Ajax+xml制作中国地区选择三级联动菜单

详细介绍javascript使用prototype实现OOP继承的方法

Python使用tablib生成excel文件的简单实现方法

使用Javascript实现图片库的平稳退化

js实现简单选项卡与自动切换效果的方法_javascript技巧

使用Angular.js实现简单的购物车功能

Javascript 创建类并动态添加属性及方法的简单实现

ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单_PHP

java下OCR的实现[j4l简单使用]

javascript实现简单的可随机变色网页计算器示例