JS的二级联动

最新推荐文章于 2021-06-24 13:37:13 发布

浩sky

最新推荐文章于 2021-06-24 13:37:13 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/qq_41761737/article/details/79793704

版权

15.1：数据准备

var china = [
     // ｛｝ 代表一个对象。 对象里面的 key:value,key:value  其中的key 就是对象的属性的名字，属性的值。
    {
        "p_name": "吉林省",
        "p_id": "jl",
        "cities": [
            {
                "c_name": "长春",
                "c_id": "cc"
            },
            {
                "c_name": "四平",
                "c_id": "sp"
            },
            {
                "c_name": "通化",
                "c_id": "th"
            },
            {
                "c_name": "松原",
                "c_id": "sy"
            }
        ]
    },
    {
        "p_name": "辽宁省",
        "p_id": "ln",
        "cities": [
            {
                "c_name": "沈阳",
                "c_id": "sy"
            },
            {
                "c_name": "大连",
                "c_id": "dl"
            },
            {
                "c_name": "抚顺",
                "c_id": "fs"
            },
            {
                "c_name": "铁岭",
                "c_id": "tl"
            },
            {
                "c_name": "丹东",
                "c_id": "tl"
            }
        ]
        
    },
    {
        "p_name": "山东省",
        "p_id": "sd",
        "cities": [
            {
                "c_name": "济南",
                "c_id": "jn"
            },
            {
                "c_name": "青岛",
                "c_id": "qd"
            },
            {
                "c_name": "威海",
                "c_id": "wh"
            },
            {
                "c_name": "烟台",
                "c_id": "yt"
            }
        ]
        
    },
    {
        "p_name": "上海市",
        "p_id": "sh",
        "cities": [
            {
                "c_name": "闵行区",
                "c_id": "mh"
            },
            {
                "c_name": "徐汇区",
                "c_id": "xh"
            },
            {
                "c_name": "黄浦区",
                "c_id": "hp"
            },
            {
                "c_name": "浦东新区",
                "c_id": "pd"
            }
        ]
        
    }
];

获取json里面的数据：

<script type="text/javascript" src="sky1.js" charset="UTF-8"></script>
		<script type="text/javascript">
			for (var i =0;i<china.length;i++) {
				alert(china[i].p_name);//拿到每一个省
				for (var j=0;j<china[i].cities.length;j++){
					alert(china[i].cities[j].c_name)//拿到每一个市
				}
			}

1.2页面准备：

<body>
		<select id="province" name="prcvince" οnchange="demo();">
			<option value="none">--请选择省份--</option>
		</select>
		<select id="city" name="city">
			<option value="none">--请选择城市--</option>
		</select>
	</body>

1.3. 页面初始化的时候，在省的select 标签添加内容

            window.οnlοad=function(){
			//按照china里面省份的信息，创建多个option标签并添加到p_select中
			//按照id=province 这个select标签
			var p_select =document.getElementById("province");
			//遍历china----china[i]代表一个省份
			for (var i=0;i<china.length;i++) {
			//china[i].p_name
			//创建option标签
			var _option = document.createElement("option");
			_option.innerHTML=china[i].p_name;
			//setAttribute(属性名，属性值)
			_option.setAttribute("value",china[i].p_id);
			//把option放到p_select中
			p_select.appendChild(_option);
			}
		}

1.4. 选择省的时候，市的信息对应变化

     function demo(){
		//删除子标签
		removeCity();
		//获取id=city的select标签
		var c_select = document.getElementById("city");
		//select 标签select。value表示的是：当前选择的option选项的value值
		//1.获取select 标签 id="province"
		var p_select = document.getElementById("province");
		var p_id = p_select.value;
		//2.遍历china
		for (var i =0;i<china.length;i++) {
			//2.1判断p_id是不是选择的省份：
			if (china[i].p_id==p_id) {
			//2.2找到省份对应的城市信息
				var cities = china[i].cities;
				//2.3对城市数组遍历
				for (var j=0;j<cities.length;j++) {
				//cities[j].c_name   城市的名字
				//创建option标签
				var _option = document.createElement("option");
				_option.innerHTML=cities[j].c_name;
				_option.setAttribute("value",cities[j].c_id);
				c_select.appendChild(_option);							
			}						
		}
	}
	}

1.5. 删除城市下面的select中

           function removeCity(){
				var c_select = document.getElementById("city");
				c_select.innerHTML="<option value='none'>--请选择城市--</option>";
			}