关于市级联动

之前做市级联动这块卡住我好久,不知道怎么去写,查看了好多二级菜单,总感觉不是很符合现在所做的项目,在看省级联动这块也感觉不适合

现在用bootstrap框架来写项目,发现导航栏这里有个点击就出现下拉菜单 适合现在所做的项目,就是功能还没有完善  比如点击其他市级会切换现有的城市,这块还没有实现

div class="dropdown" id="wr_hainan">
						<a class="" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
							海南省
						</a>
						<ul class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenu1">
							<li>
								<a href="#">海口</a>
							</li>
							<li>
								<a href="#">定安</a>
							</li>
							<li>
								<a href="#">琼海</a>
							</li>
							<li role="separator" class="divider"></li>
							<li>
								<a href="#">三亚</a>
							</li>
						</ul>
					</div>

  

转载于:https://www.cnblogs.com/wangrong-0823/p/11425409.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是使用json实现市级联动的示例代码: HTML部分: ```html <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> ``` JavaScript部分: ```javascript // 定义省市数据 var data = { "北京市": ["北京市"], "天津市": ["天津市"], "河北省": ["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"], "山西省": ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"], "内蒙古自治区": ["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市", "兴安盟", "锡林郭勒盟", "阿拉善盟"], // 其他省市数据... } // 获取省份数据 var provinceData = Object.keys(data); // 绑定省份数据到下拉框 var provinceSelect = document.getElementById("province"); for (var i = 0; i < provinceData.length; i++) { var option = document.createElement("option"); option.value = provinceData[i]; option.text = provinceData[i]; provinceSelect.add(option); } // 省份下拉框改变事件 provinceSelect.addEventListener("change", function() { // 获取选中的省份 var selectedProvince = this.value; // 获取该省份下的城市数据 var cityData = data[selectedProvince]; // 绑定城市数据到下拉框 var citySelect = document.getElementById("city"); citySelect.innerHTML = "<option value=''>请选择城市</option>"; // 先清空原有选项 for (var i = 0; i < cityData.length; i++) { var option = document.createElement("option"); option.value = cityData[i]; option.text = cityData[i]; citySelect.add(option); } }); ``` 这样就可以实现简单的省市级联动了。当选择一个省份时,下拉框中就会显示该省份下的所有城市。你可以根据实际情况修改数据和代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值