基于bootstrap的省市联动

最新推荐文章于 2022-05-05 00:24:49 发布

mh的63

最新推荐文章于 2022-05-05 00:24:49 发布

阅读量1.3k

点赞数

分类专栏： bootstrap jquery 文章标签： bootstrap jquery

本文链接：https://blog.youkuaiyun.com/baidu_39048029/article/details/99215781

版权

jquery 同时被 2 个专栏收录

4 篇文章

订阅专栏

bootstrap

2 篇文章

订阅专栏

本文介绍了一个基于Bootstrap的省市联动选择器实现方法，通过HTML、CSS和jQuery代码展示了如何创建一个响应式的省市下拉菜单，当选择省份时，相应的城市选项会自动更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于bootstrap的省市联动

效果图如下所示：
在这里插入图片描述
具体步骤：

html部分

                    <div>
                        <label for="province">省(直辖市、自治区)
                            <select name="province
" id="province" class="form-control">
                            </select>
                        </label>
                    </div>
                    <div>
                        <label for="city">市(区)
                            <select name="city" id="city" class="form-control">

                            </select>
                        </label>
                    </div>

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;
}

jq部分

$.each(provinceList,function (index,item) {
	$("#province").append(`<option value=${item.name}>${item.name}</option>`);
});
$("#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(`<option value=${m.name}>${m.name}</option>`)
			});
		}
	});
});

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

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