JS实现省市联动效果

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

实现的效果为：当选择一个省的时候，会自动出现该省下的市级

效果图如下：

<body>

    <div>

            <!--界面展示-->

            <span>省份：</span>

            <select id="province" onchange="city()">

                <option value="" selected="selected">--请选择--</option>

                <option value="beijing" >北京</option>

                <option value="jiangxi" >江西</option>

                <option value="hunan" >湖南</option>

            </select>

            <span>城市：</span>

            <select id="city">

                <option value="" selected="selected">--请选择--</option>

            </select>

        </div>

</body>

<script>

    function city() {

    //通过Id获取选择的省份

    var provinceObj = document.getElementById('province');

    //根据id获取市级标签

    var cityObj = document.getElementById('city');

    var selectProvince = provinceObj.value;

    //根据选择的省份设置市级标签中的内容

    if(selectProvince == "") {

        cityObj.innerHTML = '<option value="" selected="selected">--请选择--</option>';

    } else if(selectProvince == "beijing") {

        cityObj.innerHTML = '<option value="chaoyangqu" selected="selected">朝阳区</option>' +

            '<option value="tiananmen" >天安门</option>' +

            '<option value="yiheyuan" >颐和园</option>' +

            '<option value="zijincheng" >紫禁城</option>';

    } else if(selectProvince == "jiangxi") {

        cityObj.innerHTML = '<option value="nanchang" selected="selected">南昌</option>' +

            '<option value="ganzhou" >赣州</option>' +

            '<option value="jiujiang" >九江</option>' +

            '<option value="shangrao" >上饶</option>';

    } else if(selectProvince == "hunan") {

        cityObj.innerHTML =

            '<option value="changsha" selected="selected">长沙</option>' +

            '<option value="hy" >衡阳</option>' +

            '<option value="zz" >株洲</option>' +

            '<option value="sy" >邵阳</option>';

    }

}

</script>