Django分析之三級下拉菜單選擇省/市/縣

2019-11-14 17:28:11

字體：大中小

來源：轉載

供稿：網友

今天遇到了一個一直想做卻沒有機會去做的功能，今天完成了便記錄下來。

那這次是具體是個什么功能呢？其實還是很簡單的效果，就是在用戶注冊的時候可以選擇省/市/縣，很簡單的一個小功能。

那現在就開始了~首先我們要在數據庫中先建一個表，用來保存全國的省/市/縣信息，下面是表的結構：

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'        });        })    })