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>
  • 相关阅读:
    SQL字符串操作汇总
    重构之道清除代码异味
    Html.Action和Html.RederAction来创建子视图
    C#实现Thrift连接池[新]
    CentOS下配置Apache反向代理出错的解决
    entity framework实体用数据库默认值的方法
    为IEnumerable类型添加Add方法
    一个对Entity Framework数据层的封装
    将.netFramework4.5/MVC4/EF5/Oracle网站发布到Server2008/iis7的痛苦经历
    让vs2012运行vs2010插件的方法
  • 原文地址:https://www.cnblogs.com/rainbowupdate/p/13052390.html
Copyright © 2011-2022 走看看