城市三级联动

最新推荐文章于 2023-07-26 18:38:29 发布

凡尘堕世

最新推荐文章于 2023-07-26 18:38:29 发布

阅读量131

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_46073353/article/details/115872725

版权

js大致样式

var data = [
	{
		"code" : "110000",
		"name" : "北京市",
		"children" : [{
				"code" : "110100",
				"name" : "市辖区",
				"children" : [{
						"code" : "110101",
						"name" : "东城区"
					}, {
						"code" : "110102",
						"name" : "西城区"
					}, {
						"code" : "110105",
						"name" : "朝阳区"
					}, {
						"code" : "110106",
						"name" : "丰台区"
					}, {
						"code" : "110107",
						"name" : "石景山区"
					}, {
						"code" : "110108",
						"name" : "海淀区"
					}, {
						"code" : "110109",
						"name" : "门头沟区"
					}, {
						"code" : "110111",
						"name" : "房山区"
					}, {
						"code" : "110112",
						"name" : "通州区"
					}, {
						"code" : "110113",
						"name" : "顺义区"
					}, {
						"code" : "110114",
						"name" : "昌平区"
					}, {
						"code" : "110115",
						"name" : "大兴区"
					}, {
						"code" : "110116",
						"name" : "怀柔区"
					}, {
						"code" : "110117",
						"name" : "平谷区"
					}, {
						"code" : "110118",
						"name" : "密云区"
					}, {
						"code" : "110119",
						"name" : "延庆区"
					}
				]
			}
		]
	},

<body>
    <select name="" id="city">
        <option value="">--请选择--</option>
    </select>
    <select name="" id="country">
        <option value="">--请选择--</option>
    </select>
    <select name="" id="countryside">
        <option value="">--请选择--</option>
    </select>
    <script src="./area-json.js"></script>
</body>

首先写好html样式，三个多选框，然后各给一个选项,引入城市三级联动js文件

        var city = document.getElementById("city");
        var country = document.getElementById("country");
        var countryside = document.getElementById("countryside");
        var countryarr = [];
        var countrysidearr = [];

通过dom元素获取三个多选框，自定义两个数组，用于存放市，区的数值

        function add(arr,dom){
            for(var i = 0;i<arr.length;i++){
                var opt = document.createElement("option");
                opt.innerHTML = arr[i].name;
                opt.value = arr[i].code;
                dom.appendChild(opt);
            }
        }

定义一个函数，遍历一遍数组对象，创建option元素节点
将数组对象里name属性赋值给option内部的html片段
将数组对象的code属性赋值给option 的value
将option元素节点插入至获取的多选框中

        add(data,city)

获取引入的js文件中data里的值到city多选框中

        city.onchange = function(){
        //当city的option改变时，将city后country多选框与countryside多选框内容改为请选择选项
            country.innerHTML = "<option value=''>--请选择--</option>";
            countryside.innerHTML = "<option value=''>--请选择--</option>";
            //遍历一遍data数组，通过不同option选项来获取相对应的children值，并将其赋值给创建的数组
            for(var i = 0;i<data.length;i++){
                if(city.value == data[i].code){
                    countryarr = data[i].children;
                }
            }
            add(countryarr,country);
        }

当省选项框选项改变时，将js文件中市级数据提取并赋值给先前准备数组中

        country.onchange = function(){
            countryside.innerHTML = "<option value=''>--请选择--</option>";
            for(var i = 0;i<countryarr.length;i++){
                if(country.value == countryarr[i].code){
                    countrysidearr = countryarr[i].children;
                }
            }
            add(countrysidearr,countryside)
        }

同理，市选项改变时，改变并获取js文件中区级数据

凡尘堕世

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
城市三级联动

js大致样式var data = [ { "code" : "110000", "name" : "北京市", "children" : [{ "code" : "110100", "name" : "市辖区", "children" : [{ "code" : "110101", "name" : "东城区" }, { "code" : "110102", "name" : "西城区" }, {
复制链接

扫一扫