最近在做一个基于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')