当前位置：首页 > news >正文

JS实现省份地级市的选择

news 2025/11/4 21:18:22

JS实现省份地级市的选择
效果展示：
在这里插入图片描述
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多级联动</title>
    <!-- 多级联动：应用于购物车，地区选择，省份选择-->
    <!-- 实现**省**市**区**县 -->
    <script>
        function changeCity(obj){
            //获取这个省份的id
            var pid = obj.value;
            console.log(pid);
            // 获取市信息(pid);
            var cityData = getArea(pid);
            console.log(cityData);
            var city= document.getElementById("area");
            // 清空市信息
            city.innerHTML = "<option value='0'>请选择</option>";
            console.log(city);
            //遍历市信息
            for(var i=0;i<cityData.length;i++){
                // 创建option标签
                var option = document.createElement("option");
                // 设置option标签的文本内容
                option.innerText = cityData[i];
                // 设置option标签的value值
                option.value = i+1;
                // 将option标签添加到select标签中
                city.appendChild(option);
            }
        }
        // 通过省份id获取市信息
        function getArea(pid){
            let area =[];
            if(pid==1){
                area=['朝阳区','海淀区','西城区']
            }else if(pid==2){
                area=['浦东区','宝山区','徐汇区']
            }else if(pid==3){
                area=['济南市','青岛市','泰安市']
            }else if(pid==4){
                area=['南充市','广安市','德阳市','绵阳市','眉山市']
            }
            return area;
        }
    </script>
</head>
<body>
    <!-- 省份选择
        onchange表示当选择框的值发生改变的时候，触发onchange事件
        onchange="changeCity()" 
    -->
    选择省份：
    <select onchange="changeCity(this)" id="city">
        <option value="0">请选择</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">山东</option>
        <option value="4">四川</option>
    </select>
    <br>
    选择城市：
    <!-- 市选择 -->
     <select id="area">
        <option value="0">请选择</option>
     </select>
</body>
</html>