首页 > 代码库 > Django分析之三级下拉菜单选择省/市/县

Django分析之三级下拉菜单选择省/市/县

      今天遇到了一个一直想做却没有机会去做的功能,今天完成了便记录下来。

      那这次是具体是个什么功能呢?其实还是很简单的效果,就是在用户注册的时候可以选择省/市/县,很简单的一个小功能。

      那现在就开始了~首先我们要在数据库中先建一个表,用来保存全国的省/市/县信息,下面是表的结构:

CREATE TABLE  IF NOT EXISTS "china_regionalTable" (  "id" integer NOT NULL,  "name" varchar(50) DEFAULT NULL,  "level" integer DEFAULT NULL,  "parent" integer DEFAULT NULL,  PRIMARY KEY ("id")) ;

     剩下的就是按照这个格式去插入数据咯

insert  into "china_regionalTablet"("id","name","level","parent") values (110000,北京市,1,0),(110100,‘市辖区‘,2,110000).......

     现在数据库里有数据了,因为我用的是Python的SQLAlchemyORM框架,所以下面就要写model类来与数据库中的表进行映射了

class ChinaRegionalTable(dash_models.Base):    __tablename__ = china_regionalTable    id = Column(SmallInteger,nullable=False,primary_key=True)    name = Column(String(200))    level = Column(SmallInteger,nullable=False)    parent = Column(SmallInteger,nullable=False)

     那么现在就是在view层来处理来自前端的请求了

#注册页面选择区县def get_city(request):    parent = int(request.POST[parent])    level = request.POST[level]    s = request.get_session()    citys = s.query(ChinaRegionalTable).filter_by(parent=parent,level=level).all()    dict_city = []    for city in citys:        temp = []        temp.append(city.id)        temp.append(city.name)        dict_city.append(temp)    return HttpResponse(json.dumps({"dict_city":dict_city}))

     这其中是通过get_session()来取得与数据库的连接的,下面就是一个URL的路由表了

url(r^ajax/get_city/$ ,get_city),

     接下来就是前端页面的代码了,首先是部分静态的HTML代码:

<div class="input-group" style="margin-bottom: 10px;margin-left: 70px;">        <span class="input-group-addon" style="padding: 5px 10px"><i class="glyphicon glyphicon-info-sign"></i></span>        <select id="shengcode" >             <option selected value="">请选择省份</option>        </select>        <select id="shicode" >             <option selected value="">请选择</option>        </select>        <select id="xiancode" >             <option selected value="">请选择</option>        </select></div>

    因为使用的是jQuery,所以采用的是当页面第一次加载完成的时候就发送一个ajax请求到后台取得第一级的内容,然后绑定事件,当我选择第一级下拉菜单中的内容的时候我便会去后台查找,然后返回第二级菜单的内容,从而以此类推,直到结束。

$(function(){        $.ajax({            type:‘POST‘,            url:‘/app/ajax/get_city/‘,            data:{"parent":0,"level":1},            success:function(data){                var all_ps=data[‘dict_city‘]<!--这里取得结果后,然后遍历出结果填充在对应的html页面中-->                for(var i=0;i<all_ps.length;i++){                    var $html=String.format(‘<option value="http://www.mamicode.com/{0}">{1}</option>‘,all_ps[i][0],all_ps[i][1])                    $(‘#shengcode‘).append($html)                }            },            error: function (jqXHR, textStatus, errorThrown) {                console.log("error");                    },            dataType: ‘json‘        });
        $(‘#shengcode‘).change(function(){            var parent = $(‘#shengcode‘).val()            $.ajax({            type:‘POST‘,            url:‘/app/ajax/get_city/‘,            data:{"parent":parent,"level":2},            success:function(data){                var all_ps=data[‘dict_city‘]<!--在填充之前将后面的几个下拉菜单制空-->                var $shicode = $(‘#shicode‘).empty();                $shicode.append(‘<option selected value="">请选择</option>‘)                var $xiancode = $(‘#xiancode‘).empty();                $xiancode.append(‘<option selected value="">请选择</option>‘)                for(var i=0;i<all_ps.length;i++){                    var $html=String.format(‘<option value="http://www.mamicode.com/{0}">{1}</option>‘,all_ps[i][0],all_ps[i][1])                    $(‘#shicode‘).append($html)                }            },            error: function (jqXHR, textStatus, errorThrown) {                console.log("error");                    },            dataType: ‘json‘        });        })         $(‘#shicode‘).change(function(){            var parent = $(‘#shicode‘).val()            $.ajax({            type:‘POST‘,            url:‘/app/ajax/get_city/‘,            data:{"parent":parent,"level":3},            success:function(data){                var all_ps=data[‘dict_city‘]                var $xiancode = $(‘#xiancode‘).empty();                $xiancode.append(‘<option selected value="">请选择</option>‘)                for(var i=0;i<all_ps.length;i++){                    var $html=String.format(‘<option value="http://www.mamicode.com/{0}">{1}</option>‘,all_ps[i][0],all_ps[i][1])                    $(‘#xiancode‘).append($html)                }            },            error: function (jqXHR, textStatus, errorThrown) {                console.log("error");                    },            dataType: ‘json‘        });        })    })

       到此为止,这个简单的小功能就算彻底实现了,但是还是有个小小的不爽,就是虽然三次请求都是使用的一个url地址,而且也都使用的是一个view函数来处理的,但是前端的js代码却要写三次,感觉有些累赘,如果能有更好的意见感谢各位大神告知小弟Orz….

Django分析之三级下拉菜单选择省/市/县