演示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>