django+jquery 实现级联选择菜单

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

最近在做一个基于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操作吗?


登录 *


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