Select province, city, or county from the drop-down menu at level 3 of Django analysis,

Select province, city, or county from the drop-down menu at level 3 of Django analysis,

Today, I encountered a feature that I always wanted to do but I didn't have the opportunity to do. Now I will record it when I finish it today.

What is the specific function this time? In fact, it is quite simple, that is, when users register, they can choose the province, city, and county, a very simple small function.

So now we start ~ First, we need to create a table in the database to store the province, city, and county information nationwide. The following table structure:

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")) ;

The rest is to insert data in this format.

Insert into "china_regionalTablet" ("id", "name", "level", "parent") values (110000, 'beijing', 110100), (, 'registry ', ).......

Now there is data in the database, because I use PythonSQLAlThe chemyORM framework, so we need to write the model class below to map the tables in the database.

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)

Now, the view layer is used to process requests from the front-end.

# On the registration page, select 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 () is used to connect to the database. The following is a URL route table.

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

The code for the front-end page is followed by some static HTML code:

<Div class = "input-group" style = "margin-bottom: 10px; margin-left: 70px; "> <span class =" input-group-addon "style =" padding: 5px 10px "> <I class =" glyphicon-info-sign "> </I> </span> <select id =" shengcode "> <option selected value = ""> select a province </option> </select> <select id = "shicode"> <option selected value = ""> select </option> </select> <select id = "xiancode"> <option selected value = ""> select </option> </select> </div>

Because jQuery is used, when the page is loaded for the first time, an ajax request is sent to the background to obtain the first level of content and then bind the event, when I select the content in the first-level drop-down menu, I will go to the background to find the content, then return the content of the second-level menu, and so on until the end.

$ (Function () {$. ajax ({type: 'post', url: '/app/ajax/get_city/', data: {"parent": 0, "level": 1}, success: function (data) {var all_ps = data ['dict _ City'] <! -- After obtaining the result, traverse the result and fill it in the corresponding html page --> 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'] <! -- Empty the following drop-down menus before filling --> var $ shicode = $ ('# shicode '). empty (); $ shicode. append ('<option selected value = ""> select </option>') var $ xiancode = $ ('# xiancode '). empty (); $ xiancode. append ('<option selected value = ""> select </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 = ""> select </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 '});})})

So far, this simple small feature has been fully implemented, but it is still a little uncomfortable, that is, although three requests are all using a url address, it also uses a view function for processing, but the front-end js code has to be written three times. It feels a little cumbersome. If you have better comments, thank you for telling me Orz ....