django三级联动菜单
前端发送到后端的数据要有相应的变量进行接收
需要下载jquery，写个ajx从后端取数据----即jquery
首先创建一个getprovince的函数，返回字典的key----即省
前端在后端取数据的时候是用的ajax
在定义了views后紧接着就是到html中去定义
制作三级联动菜单----即省市县
1--设置显示页面的html，使用label，selec，optio标签
2--前端显示页面搞完就需要在后台设置我们想要在前端显示的数据，在后台的view中 定义一个data的字典
3--在前端进行设置选取省市县 利用jquery定义当省市县各自改变的时候他下面的选项随即清空，并将相应的上级 菜单的下属准备好，准备在上级调动的时候显示在当前的选项栏内
4--利用ajax从后台选取数据
5--定义函数当上级变动的时候，下级也随之出现相应的选项，而不是还是上一个的下 属
6--在后台定义怎样取得data中的key，values也就是省市县
前端html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Title</title>
</head>
<body>
<label for='province'>province:</label>
<select id='province'>
<option value="-1">choice</option>
</select>
</br>
<label for='city'>city:</label>
<select id='city'>
<option value="-1">choice</option>
</select>
</br>
<label for='county'>county:</label>
<select id='county'>
<option value="-1">choice</option>
</select>
</br>
<input type="button" id="request" value="request">
<div class="container"></div>
<script type="text/javascript" src="/statics/jquery.js"></script>
<script type="text/javascript">
$(function(){
init();
$('#province').change(function () {
provinceid =$("#province option:selected").val();
//alert(provinceid)
$('#city :gt(0)').remove();
$('#county :gt(0)').remove();
request('/getcity/',bindcity,{ID:provinceid}) })
$('#city').change(function () {
provinceid =$('#province option:selected').val();
//cityid =$("#city option:selected").val();
cityid=$('#city option:selected').val();
//alert(cityid)
//alert(provinceid)
$('#city :gt(0)').remove();
$('#county :gt(0)').remove();
request('/getcounty/',bindcounty,{proID:provinceid,cityID:cityid})
//alert(cityid) })
$('#request').click(function(){
alert($('#provice').find('option:selected').val());
alert($("#province option:selected").val()); });
});
function init(){
request('/getprovince/',bindprovince,null) }
function request(url,func,data){
$.ajax({
type:'GET',
data:data,
url:url,
cache:false,
async:true,
//dataType:'jsonp',
//jsonpCallback:"callback",
success:func }); }
function bindprovince(data) {
//console.log(data)
data=$.parseJSON(data)
$.each(data,function (i) {
//console.log(i)
op = "<option value="+i+">"+data[i]+"</option>"
$('#province').append(op); }) }
function bindcity(data) {
console.log(data)
data=$.parseJSON(data)
$.each(data,function (i) {
console.log(i)
op = "<option value="+i+">"+data[i]+"</option>"
$('#city').append(op); }) }
function bindcounty(data) {
//console.log(data)
data=$.parseJSON(data)
$.each(data,function (i) {
console.log(i)
op = "<option value="+i+">"+data[i]+"</option>"
$('#county').append(op); }) }
</script>
</body>
</html>
后端views
from django.shortcuts import render
# Create your views here.
from django.http import HttpResponse
from django.shortcuts import render_to_response
import json
data={ 'shandong':{
'jinan':['A','B','C'],
'dezhou':['paji','jiaozi','shi'] },
'hebei':{
'shijiazhuang':['xinji','gaoji'],
'chengde':['xinglong','pingquan'] } }
def index(request):
return render_to_response('index.html')
def index1(request):
return render_to_response('index1.html')
def getprovince(request):
result=data.keys()
return HttpResponse(json.dumps(result))
def getcity(request):
getdata=request.GET
provinceID=getdata.get('ID')
result=data.values()
result2=result[int(provinceID)]
result3=result2.keys()
return HttpResponse(json.dumps(result3))
def getcounty(request):
getdata=request.GET
provinceID=getdata.get('proID')
cityID=getdata.get('cityID')
result=data.values()
result2=result[int(provinceID)]
result3=result2.values()
result4=result3[int(cityID)]
return HttpResponse(json.dumps(result4))
url
from django.conf.urls import patterns, include, url
from django.contrib import admin
from app01 import views
urlpatterns = patterns('',
# Examples:
# url(r'^$', 'sanji.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
url(r'^admin/', include(admin.site.urls)),
#url(r'^index/',views.index),
url(r'^index1/',views.index1),
url(r'^getprovince/',views.getprovince),
url(r'^getcity/',views.getcity),
url(r'^getcounty/',views.getcounty), )
需要在setting中设置
STATIC_URL = '/statics/'
STATICFILES_DIRS = ( os.path.join(BASE_DIR,'statics'), )
TEMPLATE_DEBUG = True
TEMPLATE_DIRS = ( os.path.join(BASE_DIR,'templates'), )
浙公网安备 33010602011771号