Django依赖选择

Posted 2023-02-23

【中文标题】Django依赖选择

【英文标题】：Django dependent select

【发布时间】：2014-10-31 15:11:07

【问题描述】：

我知道这个问题有很多答案，但我是 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, **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 方法要长得多，但我在这里只写一个简单的方法。我从这个网站 http://www.devinterface.com/blog/en/2011/02/how-to-implement-two-dropdowns-dependent-on-each-other-using-django-and-jquery/ 使用这个解决方案。但仍然选择与区不工作。我尝试在视图中将方法 all_json_models 写入此类，但它仍然没有调用此方法。有人能告诉我为什么吗？非常感谢

【参考方案1】：

此处为 AJAX 代码提供了更新的答案，并为清晰起见添加了一些内容。从下面，只需将 #selectyear 更改为您的选择 ID，并将变量 schedule_year 重命名为对您的数据有意义的名称。然后将#selectschedule成功更改为您的第二个选择ID的名称。请注意，result[i].schedule_name 对应于从视图传回的值的名称。请参阅 views.py result_set 并为您的数据相应地更改名称。

如果您希望实现 2 个以上的链式选择，这很简单。只需复制下面的代码，将每个序列链接在一​​起以获得所需的尽可能多的关系。使用条件语句重复使用相同的视图，或者只是添加另一个返回新结果的视图。

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>

HTML

<table  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>

Views.py

# 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')

urls.py

path('whatever_your_current_path_is_for_this_view/getdetails/', login_required(views.getdetails), name='get_details'),

【参考方案2】：

好吧，我为你编写了一个完整的项目，希望这可以帮助:) : 在这个项目中，我有很多城市的国家 如图所示，每次选择国家时，下一个组合框中只会显示相关城市:)

好的，不让我们看代码 （完整的项目源代码在我的github：https://github.com/nodet07/Django-Related-DropDowns）models.py： 2个简单的模型，一个国家可以有很多城市！

 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：

from django.shortcuts import render
from map.models import *
from django.utils import simplejson
from django.http import HttpResponse

def index(request):
    countries = Country.objects.all()
    print countries
    return render(request, 'index.html', 'countries': countries)

def getdetails(request):
    #country_name = request.POST['country_name']
    country_name = request.GET['cnt']
    print "ajax country_name ", country_name

    result_set = []
    all_cities = []
    answer = str(country_name[1:-1])
    selected_country = Country.objects.get(name=answer)
    print "selected country name ", selected_country
    all_cities = selected_country.city_set.all()
    for city in all_cities:
        print "city name", city.name
        result_set.append('name': city.name)
    return HttpResponse(simplejson.dumps(result_set), mimetype='application/json',     content_type='application/json')

index.html：

<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"></script>
        <script>
            $(document).ready(function()
                 $('select#selectcountries').change(function () 
                     var optionSelected = $(this).find("option:selected");
                     var valueSelected  = optionSelected.val();
                     var country_name   = optionSelected.text();


                     data = 'cnt' : country_name ;
                     ajax('/getdetails',data,function(result)

                            console.log(result);
                            $("#selectcities option").remove();
                            for (var i = result.length - 1; i >= 0; i--) 
                                $("#selectcities").append('<option>'+ result[i].name +'</option>');
                            ;


                         );
                 );
            );
        </script>
    </head>

    <body>
        <select name="selectcountries" id="selectcountries">
        % for item in countries %
            <option val=" item.name ">  item.name  </option>    
        % endfor %
        </select>   


        <select name ="selectcities" id="selectcities">


        </select>

    </body>
</html>

【讨论】：

如果你不明白这段代码的任何部分，问我会回答;)

非常感谢您的帮助。这个解决方案就是我需要的！ :) 进行了小改动（名称和 utf-8），并且运行良好 :)

@Johny：欢迎您:)！请将此答案验证为已接受的答案，以便其他人确定，当他们来到此页面时这是正确的；）

谢谢。这对我很有帮助。

干得好。对于对如何使用 jQuery 一无所知的我来说，这是一个非常简单的启示：)

【参考方案3】：

我已经厌倦了非 DRY 解决方案，所以我写了一些对于大多数用例来说可能足够灵活的东西：

django-related-select

目前它只处理在线/AJAX 相关的选择框。我最终计划（可能在本周或下周）添加一个离线模式，该模式使用小部件推送一些渲染的 JS，以跟踪父级的 onchange 事件并通过 value -> list(choices 的映射将其转换为子级选择）。 AJAX 解决方案非常适合汽车品牌/型号（1000 多种选择），而离线解决方案非常适合产品/颜色（可能有 10 多种选择）。

【参考方案4】：

你可以使用链接的Jquery插件。

示例： http://codepen.io/anon/pen/EapNPo?editors=101

HTML

<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>

js

$("#id_city").chained("#id_country");

使用模型生成表单（外键）

转到https://axiacore.com/blog/django-y-selects-encadenados/完整教程

【讨论】：

当添加诸如class="form-control" 之类的附加参数时，表单将停止工作。如何解决？ ***.com/questions/57537201/…