演示ui框架中都会写的到省市级联
为了方便就只弄了个form表单来演示效果
<form action="#">
<table width="600" height="350px">
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" style="width:150px" onchange="gaibian()">
<option value="">----请-选-择-省----</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
</select></td>
</tr>
</table>
</form>
JavaScript代码:每步操作都有详细的注解,为了简化就只写了几个省,
如果要了解有些ui框架的省市级联的话可以去看对应框架js包中的源码,思路可能不同,这里仅代表个人实现方法
<script>
//准备省市数据
let provinceData = ["北京","河北","辽宁"];
//准备省对应的市数据
let cityData = { "北京":["顺义区","昌平区","朝阳区"], "河北":["保定","石家庄","廊坊"], "辽宁":["沈阳","铁岭","抚顺"]};
/*先把初始化的省数据放到对应的标签展示*/
let privinceTag = document.querySelector("#provinceId");
//遍历省数据,将省数据分别放到option标签的value和内容中
//字符串拼接,Es6中的${}新语法
//将字符串变量用${}包起来,再写到需要拼接的地方
for (let pro of provinceData){
privinceTag.innerHTML+=`<option value="${pro}">${pro}</option>`;
//注意外面不是单引号,是1旁边的飘号
/* 省改变时间函数,只要选择框中的省发生改变,马上清空所有的之前产生的所有市的option,
并重新获取改变过后的省的对应市的值,并遍历创建option标签将值放在便签中,显示在页面中*/
function gaibian() {
//获取改变过后的省
let privinceValue = privinceTag.value;
//获取省对应的市的值组
let cityValue = cityData[privinceValue];
//获取市标签
let cityTag = document.querySelector("#cityId");
//清空市的所有option
cityTag.innerHTML='<option value="">----请-选-择-市----</option>';
//循环加入新的市option标签
for (let cit of cityValue){
cityTag.innerHTML+=`<option value="${cit}">${cit}</option>`;
}
}
}
</script>
演示效果:
L.X.Q.