Как создать выпадающие зависимости - PullRequest
Новая
       5

Как создать выпадающие зависимости

0 голосов
/ 27 февраля 2020

У меня есть выпадающий список с различными значениями из базы данных. В зависимости от выбранного значения в этом раскрывающемся списке, я хочу, чтобы второе раскрывающееся меню было обновлено другими значениями из той же таблицы. В качестве примера, скажем, у меня есть таблица с полями «Континенты» и «Страны», например, если я выберу «Европа», я хочу, чтобы во втором раскрывающемся списке отображались страны в моей базе данных, принадлежащие этому континенту.

Мне удалось создать первый выпадающий список и подключить его к БД, но я борюсь со вторым этапом, который состоит в том, чтобы получить выбор первого выпадающего списка и использовать его для обновления второго.

Вот мои 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: обновил мою страницу html, добавив код Js, который помогает мне найти выбранный континент. Теперь мне нужно использовать его для отображения соответствующих стран во втором раскрывающемся списке.

...