如何创建下拉依赖项

Question

我有一个下拉菜单，它从数据库中获取不同的值。根据此下拉列表中的选定值，我希望第二个下拉列表使用同一表中的其他不同值进行更新。例如，假设我有一个包含“洲”和“国家”字段的表，例如，如果我选择“欧洲”，则我希望第二个下拉列表显示数据库中属于该大陆的国家。

我设法创建了第一个下拉列表并将其连接到数据库，但是我在第二步上很挣扎，这是检索第一个下拉列表的选择并使用它来更新第二个下拉列表。

这是我的views.py：

def MyView(request):

    query_results = data_world.objects.all()
    continents_list = ContinentsChoiceField()
    countries_list = CountriesChoiceField() 

    query_results_dict = {
        'query_results': query_results,
        'continents_list': continents_list ,
        'countries_list': countries_list ,
    }

    return render(request,'home.html', query_results_dict)

models.py：

class data_world(models.Model):

    id = models.AutoField(primary_key=True)
    continent_name= models.TextField(db_column='CONTINENTS', blank=True, null=True)  
    country_name = models.TextField(db_column='COUNTRIES', blank=True, null=True) 
    city_name = models.TextField(db_column='CITIES', blank=True, null=True)

    class Meta:
        managed = True
        db_table = 'world'

forms.py：

class ContinentsChoiceField(forms.Form):

    continents = forms.ModelChoiceField(
        queryset=data_world.objects.values_list("continent_name", flat=True).distinct(),
        empty_label=None
    )

class CountriesChoiceField(forms.Form):

    countries = forms.ModelChoiceField(
        queryset=data_world.objects.values_list("country_name", flat=True).distinct(),
        empty_label=None
    )

home.html：

<select id="continents">
    {% for item in continents_list %}
    <option val="{{ item.continent_name }}"> {{ item }} </option>    
    {% endfor %}
  </select>

  <script type="text/javascript">
    function GetSelectedText(){
      var ct = document.getElementById("continents");
      var result_ct = ct.options[ct.selectedIndex].text;

      document.getElementById("result_ct").innerHTML = result_ct;
      }
  </script>

<button type="button" onclick="GetSelectedText()">Get Selected Value</button>

<select id="countries">
  {% for item in countries_list %}
  <option val="{{ item.country_name }}"> {{ item }} </option>    
  {% endfor %}
</select>

编辑1：用一些Js代码更新了我的html页面，这有助于我检索所选的大陆。现在，我需要使用它在第二个下拉列表中显示相应的国家/地区。

Answer 1

django-select2软件包正是这样做的。

看看https://django-select2.readthedocs.io/en/latest/extra.html

在models.py中

class Country(models.Model):
     name = models.CharField(max_length=255)


class City(models.Model):
     name = models.CharField(max_length=255)
    country = models.ForeignKey('Country', related_name="cities")

然后定制表格：

...
from django_select2.forms import ModelSelect2Widget
class AddressForm(forms.Form):
    country = forms.ModelChoiceField(
        queryset=Country.objects.all(),
        label=u"Country",
        widget=ModelSelect2Widget(
            model=Country,
            search_fields=['name__icontains'],
        )
)

city = forms.ModelChoiceField(
    queryset=City.objects.all(),
    label=u"City",
    widget=ModelSelect2Widget(
        model=City,
        search_fields=['name__icontains'],
        dependent_fields={'country': 'country'},
        max_results=500,
    )
)