基于bootstrap的省市联动

基于bootstrap的省市联动

效果图如下所示：

具体步骤：

1. html部分

                    

                        省(直辖市、自治区)
                            
                            
                        
                    
                    

                        市(区)
                            

                            
                        
                    

2. css部分

#basic-information4-section label{
    font-size: 18px;
    font-weight: 500;
    color: #484848;
    margin-top: 20px;
}
#basic-information4-section  select{
    margin-top: 10px;
    width: 350px;
}

3. jq部分

$.each(provinceList,function (index,item) {
	$("#province").append(`${item.name}`);
});
$("#province").change(function(){
	$("#city").get(0).length = 0;
	var val = this.value;
	console.log(val)
	console.log(provinceList)
	$.each(provinceList, function(index,item) {
		if (val === item.name) {
			console.log(item)
			$.each(item.cityList,function(j,m){
				//创建对象，并且添加到城市下拉框中
				$("#city").append(`${m.name}`)
			});
		}
	});
});

备注：
需要引入一个area.js
格式如下：

var provinceList = [
    {name:'北京', cityList:[
        {name:'市辖区', areaList:['东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区']},
        {name:'县', areaList:['密云县','延庆县']}
    ]},
    {name:'上海', cityList:[
        {name:'市辖区', areaList:['黄浦区','卢湾区','徐汇区','长宁区','静安区','普陀区','闸北区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','南汇区','奉贤区']},
        {name:'县', areaList:['崇明县']}
    ]}]