省市区三级联动

省市区三级联动

案例效果

案例步骤

1.通过接口获取省份信息
2.使用js获取到省市区下拉框元素
3.将服务器端返回的省份信息显示在下拉框中
4.为下拉框元素添加表单值改变事件(onchange)
5.当用户选择省份时,根据省份id获取县城信息
6.当用户选择城市时,根据城市id获取县城信息

HTML代码

 <div class="container">
        <div class="form-inline">
            <div class="form-group">
                <select  id="province">
                </select>
            </div>
            <div class="form-group">
                <select  id="city">
                    <option>请选择城市</option>
                </select>
            </div>
            <div class="form-group">
                <select  id="town">
                    <option value="">请选择县城</option>
                </select>
            </div>
        </div>
    </div>

CSS代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 800px;
            height: 400px;
            margin: 100px auto;
            background-color: #e4e4e4;
        }
        .container .form-inline{
            width: 700px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
        }
        .form-inline .form-group{
            float: left;
            width: 200px;
            height: 50px;
            margin-left: 25px;
        }
        .container select{
            height: 25px;
            float: left;
            outline: none;
            margin: 16px 55px;
        }
    </style>

JS代码

<script src="./js/ajax.js"></script>
    <script src="./js/template-web.js"></script>
    <script type="text/html" id="provinceTpl">
        <option>请选择省份</option>
        {{each province}}
        <option value ="{{$value.id}}">{{$value.name}} </option>
        {{/each}}
    </script>
    <script type="text/html" id="cityTpl">
        <option>请选择城市</option>
        {{each city}}
        <option value ="{{$value.id}}">{{$value.name}} </option>
        {{/each}}
    </script>
    <script type="text/html" id="townTpl">
        <option>请选择县城</option>
        {{each town}}
        <option value ="{{$value.id}}">{{$value.name}} </option>
        {{/each}}
    </script>
    <script>
        var province = document.querySelector('#province');
        var city = document.querySelector('#city');
        var town = document.querySelector('#town');
        ajax({
            type:'get',
            url: 'http://localhost:3000/province',
            success:function(data){
                // 将服务器端返回的数据和模板进行拼接
             var html = template ('provinceTpl',{province:data}); 
                  // 将拼接好的html字符串显示到页面中
                   province.innerHTML = html;
            }
        })
        // 为省份的下拉框添加值改变事件
        province.onchange = function(){
            var pid =this.value;
            // 清空县城下拉框中的数据
            var html = template('townTpl',{town:[]});
                   town.innerHTML = html;
             ajax({
                 type:'get',
                 url:'/cities',
                 data:{
                     id:pid
                 },
                 success:function(data){
                    var html = template('cityTpl',{city:data});
                   city.innerHTML = html;
                 }
             })
        }
        city.onchange = function(){
            var cid =this.value;
             ajax({
                 type:'get',
                 url:'/towns',
                 data:{
                     id:cid
                 },
                 success:function(data){
                    var html = template('townTpl',{town:data});
                   town.innerHTML = html;
                 }
             })
        }
    </script>

服务器端代码

// 引入express模块
const express = require('express');
// 引入path模块,处理路径
const path = require('path');
// 创建服务器
const app = express();
// 静态资源访问功能
app.use(express.static(path.join(__dirname,'public')));
app.get('/province', (req, res) => {
    res.send([{
        id: '001',
        name: '黑龙江省'
    }, {
        id: '002',
        name: '四川省'
    }, {
        id: '003',
        name: '河北省'
    }, {
        id: '004',
        name: '江苏省'
    }]);
});
app.get('/cities', (req, res) => {
    // 获取省份id
    const id = req.query.id;
    // 城市信息
    const cities = {
        '001': [{
            id: '300',
            name: '哈尔滨市'
        }, {
            id: '301',
            name: '齐齐哈尔市'
        }, {
            id: '302',
            name: '牡丹江市'
        }, {
            id: '303',
            name: '佳木斯市'
        }],
        '002': [{
            id: '400',
            name: '成都市'
        }, {
            id: '401',
            name: '绵阳市'
        }, {
            id: '402',
            name: '德阳市'
        }, {
            id: '403',
            name: '攀枝花市'
        }],
        '003': [{
            id: '500',
            name: '石家庄市'
        }, {
            id: '501',
            name: '唐山市'
        }, {
            id: '502',
            name: '秦皇岛市'
        }, {
            id: '503',
            name: '邯郸市'
        }],
        '004': [{
            id: '600',
            name: '常州市'
        }, {
            id: '601',
            name: '徐州市'
        }, {
            id: '602',
            name: '南京市'
        }, {
            id: '603',
            name: '淮安市'
        }]
    }
    // 响应
    res.send(cities[id]);
});
app.get('/towns', (req, res) => {
    // 获取城市id
    const id = req.query.id;
    // 县城信息
    const town = {
        '300': [{
            id: '20',
            name: '莲湖区',
        }, {
            id: '21',
            name: '长安区'
        }, {
            id: '22',
            name: '高新区',
        }, {
            id: '23',
            name: '未央区'
        }],
        '301': [{
            id: '30',
            name: '鄠邑区'
        }, {
            id: '31',
            name: '华州区'
        }, {
            id: '32',
            name: '潼关区'
        }]
    };
    // 响应
    res.send(town[id]||[]);
});
// 监听端口
app.listen(3000);
// 控制台显示输出
console.log('网站服务器启动成功');

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市级三级联动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 800px;
            height: 400px;
            margin: 100px auto;
            background-color: #e4e4e4;
        }
        .container .form-inline{
            width: 700px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
        }
        .form-inline .form-group{
            float: left;
            width: 200px;
            height: 50px;
            margin-left: 25px;
        }
        .container select{
            height: 25px;
            float: left;
            outline: none;
            margin: 16px 55px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-inline">
            <div class="form-group">
                <select  id="province">
                </select>
            </div>
            <div class="form-group">
                <select  id="city">
                    <option>请选择城市</option>
                </select>
            </div>
            <div class="form-group">
                <select  id="town">
                    <option value="">请选择县城</option>
                </select>
            </div>
        </div>
    </div>
    <script src="./js/ajax.js"></script>
    <script src="./js/template-web.js"></script>
    <script type="text/html" id="provinceTpl">
        <option>请选择省份</option>
        {{each province}}
        <option value ="{{$value.id}}">{{$value.name}} </option>
        {{/each}}
    </script>
    <script type="text/html" id="cityTpl">
        <option>请选择城市</option>
        {{each city}}
        <option value ="{{$value.id}}">{{$value.name}} </option>
        {{/each}}
    </script>
    <script type="text/html" id="townTpl">
        <option>请选择县城</option>
        {{each town}}
        <option value ="{{$value.id}}">{{$value.name}} </option>
        {{/each}}
    </script>
    <script>
        var province = document.querySelector('#province');
        var city = document.querySelector('#city');
        var town = document.querySelector('#town');
        ajax({
            type:'get',
            url: 'http://localhost:1000/province',
            success:function(data){
                  var html = template ('provinceTpl',{province:data});
                   province.innerHTML = html;
            }
        })
        // 为省份的下拉框添加值改变事件
        province.onchange = function(){
            var pid =this.value;
            var html = template('townTpl',{town:[]});
                   town.innerHTML = html;
             ajax({
                 type:'get',
                 url:'/cities',
                 data:{
                     id:pid
                 },
                 success:function(data){
                    var html = template('cityTpl',{city:data});
                   city.innerHTML = html;
                 }
             })
        }
        city.onchange = function(){
            var cid =this.value;
             ajax({
                 type:'get',
                 url:'/towns',
                 data:{
                     id:cid
                 },
                 success:function(data){
                    var html = template('townTpl',{town:data});
                   town.innerHTML = html;
                 }
             })
        }
    </script>
</body>
</html>