Jquery 依赖于Django的选择
我知道这个问题有很多答案,但我是Django的新手,我不知道如何实施这些解决方案。首先,我想做什么。这是我的模型:Jquery 依赖于Django的选择,jquery,python,django,Jquery,Python,Django,我知道这个问题有很多答案,但我是Django的新手,我不知道如何实施这些解决方案。首先,我想做什么。这是我的模型: class Region(models.Model): name = models.CharField(max_length=255, verbose_name=_("Name")) slug = models.SlugField(max_length=150, unique=True, null=True) def save(self,*args, *
class Region(models.Model):
name = models.CharField(max_length=255, verbose_name=_("Name"))
slug = models.SlugField(max_length=150, unique=True, null=True)
def save(self,*args, **kwargs):
if not self.slug:
self.slug = slugify(self.name)
super(Region,self).save(*args,**kwargs)
def __unicode__(self):
return u'%s' % (self.name)
class Meta:
verbose_name = _('Region')
verbose_name_plural = _('Regions')
class District(models.Model):
name = models.CharField(max_length=255, verbose_name=_("Name"))
slug = models.SlugField(max_length=150, unique=True, null=True)
region = models.ForeignKey(Region,verbose_name=_("Region"))
def save(self, *args, **kwargs):
if not self.slug:
self.slug = slugify(self.name)
super(District, self).save(*args, **kwargs)
def is_in_region(self, region):
if self.region == region:
return True
else:
return False
def __unicode__(self):
return u'%s' % (self.name)
class Meta:
verbose_name = _("District")
verbose_name_plural = _("Districts")
在前端页面,我想选择一个地区和地区选择将显示该地区的地区。这是我的看法:
class SearchView(ListView):
template_name = 'advert/list_view.html'
def all_json_models(self, request, region):
current_reg = Region.objects.get(slug=region)
districts = District.objects.all().filter(region=current_reg)
json_models = serializers.serialize("json", districts)
return http.HttpResponse(json_models, mimetype="application/javascript")
def get(self, request, *args, **kwargs):
return self.post(request, *args, **kwargs)
def post(self, request, *args, **kwargs):
self.request = request
try:
self.page = int(self.request.GET.get('page','1'))
except:
self.page = 1
self.queryset = ""
return super(SearchView, self).get(request, *args, **kwargs)
def get_queryset(self):
"""We have to bypass the queryset because
we are joining several object lists together. """
return None
def get_context_data(self, **kwargs):
context['regions'] = Region.objects.all().order_by("name")
return context
get_context_data方法要长得多,但我在这里只写了一个简单的方法。我使用此网站提供的解决方案。但仍然选择与地区不起作用。我尝试在视图中为这个类编写方法all_json_模型,但仍然没有调用这个方法。有人能告诉我为什么吗?Thx很多嗯,我为您编写了一个完整的项目,希望这能有所帮助: 在这个项目中,我们的国家有很多城市 如图所示,每次选择一个国家时,下一个组合框中只显示相关城市: 好的,不,让我们看看代码 完整的项目源代码位于我的: models.py: 只有两个简单的模型,一个可以有很多城市的国家
from django.db import models
class City(models.Model):
name = models.CharField(max_length=50)
country = models.ForeignKey("Country")
def __unicode__(self):
return u'%s' % (self.name)
class Country(models.Model):
name = models.CharField(max_length=50)
def __unicode__(self):
return u'%s' % (self.name)
views.py:
index.html:
您可以使用Jquery插件链接 例如: HTML 使用模型ForeignKey生成表单
进入完整教程我厌倦了这方面的非干性解决方案,所以我写了一些对大多数用例来说可能足够灵活的东西:
目前,它只处理与在线/AJAX相关的选择框。我最终计划在本周或下一周添加一个离线模式,通过小部件推送一点呈现的JS来跟踪父对象的onchange事件,并通过值映射->listchoices将其转换为子选项。AJAX解决方案非常适合选择汽车品牌/1000型,而离线解决方案非常适合选择10种产品/颜色。这里提供了AJAX代码的更新答案,以及一些清晰的补充。从下面开始,只需将selectyear更改为您的SelectID,并将变量schedule\u year重命名为对您的数据有意义的名称。然后将selectschedule in success更改为第二个select id的名称。请注意,结果[i].schedule\u name对应于从视图传回的值的名称。请参见views.py result_set并相应地更改数据的名称 如果您希望实现两个以上的链式选择,那么这很简单。只需复制下面的代码,将每个序列链接在一起,以获得所需的多个关系。使用条件语句重用同一视图,或者只添加另一个返回新结果的视图 javascript和AJAX
<script>
$(document).ready(function(){
//handle selected year
$('select#selectyear').change(function () {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var schedule_year = optionSelected.text();
$.ajax({
url: 'getdetails/',
type: 'GET',
data: {'year' : JSON.stringify(schedule_year)},
success: function(result){
//remove previous selections
$("#selectschedule option").remove();
//add a blank option
$("#selectschedule").append('<option></option>');
//append new options returned
for (var i = result.length - 1; i >= 0; i--) {
$("#selectschedule").append('<option>'+ result[i].schedule_name +'</option>');
};
},
});
});
});
</script>
url.py
path('whatever_your_current_path_is_for_this_view/getdetails/', login_required(views.getdetails), name='get_details'),
如果你不理解这段代码的任何部分,问我,我会回答;非常感谢你的帮助。这个解决方案正是我所需要的!:a对名称和utf-8做了一些小的更改,它工作得很好:@Johny:your welcome:!请验证此答案是否为已接受的答案,以便其他人在进入此页面时确定此答案是正确的;谢谢这对我真的很有帮助。干得好。对于我这个对如何使用jQuery一无所知的人来说,这是一个非常简单的启示:当添加诸如class=formcontrol之类的附加参数时,表单停止工作。如何解决这个问题?
<select id="id_country" name="country">
<option value="" selected="selected">---------</option>
<option value="1">Colombia</option>
<option value="2">Rusia</option>
</select>
<select id="id_city" name="city">
<option value="" selected="selected">---------</option>
<option value="1" class="1">Bogotá</option>
<option value="2" class="2">Moscú</option>
<option value="3" class="2">San Petersburgo</option>
<option value="4" class="1">Valledupar</option>
</select>
$("#id_city").chained("#id_country");
<script>
$(document).ready(function(){
//handle selected year
$('select#selectyear').change(function () {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var schedule_year = optionSelected.text();
$.ajax({
url: 'getdetails/',
type: 'GET',
data: {'year' : JSON.stringify(schedule_year)},
success: function(result){
//remove previous selections
$("#selectschedule option").remove();
//add a blank option
$("#selectschedule").append('<option></option>');
//append new options returned
for (var i = result.length - 1; i >= 0; i--) {
$("#selectschedule").append('<option>'+ result[i].schedule_name +'</option>');
};
},
});
});
});
</script>
<table width="100%" class="table">
<tr>
<td class="align-middle" style="width: 50%;">
<label for="#selectyear" value="calendar_year" style="width:100%">
<span class="small pl-1">Select Calendar Year</span>
<select class="form-control" name="selectyear" id="selectyear">
<option value="blank"></option>
{% for schedule in schedules|dictsort:'fee_schedule_calendar_year' %}
{% ifchanged %}<!--used to only show unique values-->
<option value="{{ schedule.fee_schedule_calendar_year }}">{{ schedule.fee_schedule_calendar_year }}</option>
{% endifchanged %}
{% endfor %}
</select>
</label>
</td>
<td class="align-middle" style="width: 50%;">
<label for="#selectschedule" value="fee_schedule" style="width: 100%;">
<span class="small pl-1">Select Fee Schedule</span>
<select class="form-control" name="selectschedule" id="selectschedule"></select>
</label>
</td>
</tr>
</table>
# Handle AJAX request for fee schedule calendar year select
def getdetails(request, file_upload_id, file_header_id):
schedule_year = json.loads(request.GET.get('year'))
result_set = []
schedules = FeeSchedule.objects.filter(fee_schedule_calendar_year=schedule_year)
for schedule in schedules:
result_set.append({'schedule_name': schedule.fee_schedule_name})
return HttpResponse(json.dumps(result_set, indent=4, sort_keys=True, default=str), content_type='application/json')
path('whatever_your_current_path_is_for_this_view/getdetails/', login_required(views.getdetails), name='get_details'),