JS案例 - 城市三级联动

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档title>

head>

<body>
    <form name="form1" method="post" action="login.php">
                国家:<select name="country" id="country">
            <option value="0">请选择国家option>
            <option value="1">中国option>
            <option value="2">美国option>
            <option value="3">法国option>
            <option value="4">意大利option>
        select>
                省份:<select name="province" id="province">
            <option value="0">请选择省/城市option>
        select>
        城市:<select name="city" id="city">
            <option value="0">请选择城市/地区option>
        select>
    form>
body>
<script type="text/javascript">
    var arr_province = ["请选择省/城市", "北京市", "上海市", "天津市", "重庆市", "深圳市", "广东省"];

    var arr_city = [
        ["请选择城市/地区"],
        ["东城区", "西城区", "朝阳区", "宣武区", "昌平区", "大兴区", "丰台区", "海淀区"],
        ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'],
        ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
        ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
        ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
        ['广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市']
    ];
    var country = document.getElementById('country');
    var province = document.getElementById('province');
    var city = document.getElementById('city');


    // 添加国家监听事件
    country.addEventListener('change',function() {
        let html = '';
        if(this.value == 1){
            arr_province.forEach((ele,index) => {
                html += `
                <option value="${index}">${ele}</option>
                `
            })
        }else{
            html = ''
        }
        province.innerHTML = html;
    })

    // 添加城市监听事件
    province.addEventListener('change',function(){
        let html = "";
        arr_city[this.value].forEach((ele,index) => {
            html += `
            <option value="${index}">${ele}</option>
            `
        })
        city.innerHTML = html;
    })

script>
html>

 

你可能感兴趣的:(JS案例 - 城市三级联动)