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="{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="{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="{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….

时间: 2024-10-17 09:28:01

Django分析之三级下拉菜单选择省/市/县的相关文章

三级下拉菜单 (通用版)

<html><head><title>阿里西西网页特效演示, 三级下拉菜单 (通用版)</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head><body> <SCRIPT LANGUAGE="JavaScript"><!--functi

CSS打造三级下拉菜单

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="d

CSS样式三级下拉菜单

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

示例-下拉菜单-选择颜色

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

CSS3实现的一款三级下拉菜单

<html> <head> <title>河北礼品公司</title> <style> body { background:#eee; margin:0; padding:0; } .example { background:#fff url(/imagesforcode/201306/clouds-in-blue-sky.jpg); width:770px; height:570px; border:1px #000 solid; margin

Atitit.ui控件---下拉菜单选择控件的实现select html

Atitit.ui控件---下拉菜单选择控件的实现select   html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& model的实现 Proj.vod2 <% List li=new ArrayList(); Map m=new HashMap (); m.put("lab","爱情"); m.put("v","1"); li.add(m)

使用POI生成具有三级下拉菜单的Excel文档

曾在工作中遇到这种需求,研究很久编码出一个方法,提供于此供大家参考. 效果图如下: 开始贴代码,代码中部分测试数据不影响功能. 第一部分(核心处理): 此部分包含几个方面: 获取三级下拉框各列的数据: 创建每个下拉功能的名称管理器 在隐藏的sheet中生成下拉菜单所需要的row 代码如下: /** * 第一部分 * 将三个列表所有字段从数据库查询出,并生成名称管理器,存放至隐藏的sheet中 */ private static HSSFWorkbook writePorpData() { int

日期三级下拉菜单

Html 1 <select id="selYear"></select> 2 <select id="selMonth"></select> 3 <select id="selDay"></select> 4 <script src="DateSelector.js"></script> 5 <script type=&qu

三级下拉菜单

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> ul li.yiji { list-style-image: url(img/-.gif); } ul li{ cursor: pointer; } </styl