zoukankan      html  css  js  c++  java
  • 省市区三级联动

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./asset/bootstrap/dist/css/bootstrap.min.css">
        <script src="./js/ajax.js"></script>
        <script src="./js/template-web.js"></script>
    </head>
    
    <body>
        <div class="container">
            <div class="form-inline">
                <div class="form-group">
                    <select class="form-control" id="province">
                    
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" id="city">
                        <option>请选择城市</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" id="area">
                        <option>请选择县城</option>
                    </select>
                </div>
            </div>
        </div>
        <script type="text/html" id="protpl">
            <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="areatpl">
            <option>请选择县城</option>
            {{each area}}
            <option value={{$value.id}}>{{$value.name}}</option>
            {{/each}}
        </script>
        <script>
            var province = document.querySelector('#province')
            var city = document.querySelector('#city')
            var area = document.querySelector('#area')
            ajax({
                type: 'get',
                url: 'http://localhost:3001/province',
                success: function(data) {
                    console.log(data)
                    var html = template('protpl', {
                        province: data
                    })
                    province.innerHTML = html
                },
                error: function() {}
            })
            province.onchange = function() {
                var pid = this.value
                var html = template('areatpl', {
                    area: []
                })
                area.innerHTML = html
                ajax({
                    type: 'get',
                    url: 'http://localhost:3001/cities',
                    data: {
                        id: pid
                    },
                    success: function(data) {
                        console.log(data)
                        var html = template('citytpl', {
                            city: data
                        })
                        city.innerHTML = html
                    },
                    error: function() {}
                })
            }
            city.onchange = function() {
                var cid = this.value
                ajax({
                    type: 'get',
                    url: 'http://localhost:3001/areas',
                    data: {
                        id: cid
                    },
                    success: function(data) {
                        console.log(data)
                        var html = template('areatpl', {
                            area: data
                        })
                        area.innerHTML = html
                    },
                    error: function() {}
                })
            }
        </script>
    </body>
    
    </html>
  • 相关阅读:
    洛谷 P2330 [SCOI2005]繁忙的都市
    2016-2017 ACM-ICPC, Asia Tsukuba Regional Contest D Hidden Anagrams
    HDU1792A New Change Problem(GCD规律推导)
    HDU1222Wolf and Rabbit(GCD思维)
    poj2635The Embarrassed Cryptographer(同余膜定理)
    poj3270Cow Sorting(置换+贪心)
    计数排序(O(n+k)的排序算法,空间换时间)
    POJ1222EXTENDED LIGHTS OUT(高斯消元)
    BZOJ 2038: [2009国家集训队]小Z的袜子(hose) (莫队算法)
    2301: [HAOI2011]Problem b ( 分块+莫比乌斯反演+容斥)
  • 原文地址:https://www.cnblogs.com/rainbowupdate/p/13052390.html
Copyright © 2011-2022 走看看