django orm级联_django+jquery 实现级联选择菜单

本文介绍了如何在Django项目中利用ORM和jQuery创建级联选择菜单,例如省-市-区的选择。通过AJAX获取城市列表,并在JavaScript中动态更新选项,实现了联动效果。
摘要由CSDN通过智能技术生成

最近在做一个基于django框架的项目,需要实现级联选择菜单,比如省-市-区,记录下来,希望能帮助碰到同样问题的人。

--------------------------------------------------------------------------------------------

无代码无真相,直接上代码:

js代码:

function getCityOptions(province_id){

$.ajax({

type: "GET",

url: "/getCityList?provinceID="+province_id,

dataType:'json',

success: function(data,textStatus){

var citySelect = document.getElementById("id_city");

for ( var i=citySelect.options.length-1; i>-1; i--){

citySelect[i] = null;

}

if(data.length > 0) {

$("#id_city").show();

for(i=0;i

citySelect.options[i] = new Option();

citySelect.options[i].text = data[i].label;

citySelect.options[i].value = data[i].text;

}

}else

$("#id_city").hide();

}

})

}

模板代码:

省市:

{{form.province}}

{{form.city}}

Form.py:

provinces = Province.objects.all()

PROVINCE_CHOICES = []

for province in provinces:

PROVINCE_CHOICES.append([province.id, province.provinceName])

class myForm(forms.Form): province = forms.ChoiceField(widget = forms.Select(attrs={'class':'select', 'onChange':'getCityOptions(this.value)'}), choices = PROVINCE_CHOICES, label= u'选择省') city = forms.ChoiceField(widget = forms.Select(attrs={'class':'select', 'onChange':'getDistrictOptions(this.value)','style':'display:none'}), label = u'选择市')

model.py:

class Province(models.Model):

provinceName = models.CharField(max_length = 20)

class City(models.Model):

cityName = models.CharField(max_length = 20)

provinceID = models.ForeignKey(Province)

view.py

def city_list(request):

city_list = []

province = request.GET['provinceID']

citys = City.objects.filter(provinceID = province)

for city in citys:

c = {}

c['label'] = city.cityName

c['text'] = city.id

city_list.append(c)

return HttpResponse(simplejson.dumps(city_list), mimetype='application/json')

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值