django+jquery 实现级联选择菜单

陈着 posted @ Apr 04, 2011 07:29:29 PM in Python , 11795 阅读

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

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

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

js代码:

<script src="/site_media/js/jquery-1.5.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
	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<data.length;i++){   
						citySelect.options[i] = new Option();   
						citySelect.options[i].text = data[i].label;   
						citySelect.options[i].value = data[i].text; 
					}
				}else
					$("#id_city").hide();  
				 
			}    
		})   
	}  
</script> 

模板代码:

<label>省市:</label>	
        {{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')

 

Avatar_small
7gong 说:
Oct 24, 2011 01:40:27 AM

陈公,最近正好需要通过django实现这样一个效果,很感谢你提供的这个实例,特别是在FORM部分给了我很大启发,但是,这个实例是不完整的:
1. JS代码部分,只是2级联动,也就是说,只有CITY部分的实现,缺少了District部分
2. ORM部分设计的我觉得不是很理想,可否将所有分类在一张表中实现?Id, Value, ParentID就已经能够很清楚的表现其关系

另外,建议最好做成实例,这样更容易帮助大家理解。
以上。

Avatar_small
7gong 说:
Oct 24, 2011 01:41:12 AM

我的站点是 tingcheba.com  , twitter id :@7gong 也欢迎你指点交流

Avatar_small
11 说:
Sep 22, 2014 01:27:34 PM

请问这个实现是django利用API实现ajax操作吗?

Avatar_small
Tamil Nadu Plus One 说:
Aug 24, 2022 09:20:33 PM

This section contains the download links for the Tamil Nadu Plus Important Model Question Paper 2023. As you are all aware, getting the best scores on the exam depends greatly on good preparation. All students may gladly download these subject-specific TN Plus Two Important Model Question Paper 2023 to their devices and practise them as needed to finish them all in a timely manner. Tamil Nadu Plus One Question Paper 2023, Candidates may also share these TN 11th Important Model Question Paper 2023 with their friends and neighbours in the same manner. Applicants must check the schedule without a doubt in order to be aware of all the key points for each subject.


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter