Django Зависимый/цепочечный выпадающий список в фильтре

Я использую Django для реализации своей веб-страницы; на этой странице у меня есть классический список элементов, которым я управляю с помощью цикла for. Я также реализовал фильтр в виде формы (с кнопкой поиска) для фильтрации элементов.

Я знаю, как я могу реализовать выпадающий список (первый код) и я знаю, как я могу реализовать фильтр формы (второй код).

ВЫПАДАЮЩИЙ СПИСОК (КОД JQUERY)

    <script>
        $( document ).ready(function()
        {
            var $provvar = $("#provddl");
                $uffvar = $("#uffddl");

                $options = $uffvar.find('option');
                $provvar.on('change',function()
                {
                    $uffvar.html($options.filter('[value="'+this.value+'"]'));
                }).trigger('change');           

        });
    </script>

ФИЛЬТР ФОРМЫ

    <form>
        <div>
            <label>C: </label>
                {{ myFilter.form.C }}
        </div>
        <div>
            <label>D: </label>
                {{ myFilter.form.D }}
        </div>

        <button type="submit">Search</button>
    </form>

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

Я не могу комментировать, поэтому я говорю то, что знаю. если вы хотите связать D с C, для этого вы можете использовать внешний ключ для D, и загрузить данные D с помощью ajax, используя id C. пример:

models.py:

class C(models.Model):
   id = models.PositiveIntegerField(primary_key=True)
   name = models.CharField(max_length=50)

   def __str__(self):
      return self.name



class D(models.Model):
    c= models.ForeignKey(C, on_delete=models.CASCADE)
    name = models.CharField(max_length=50)

    def __str__(self):
        return self.name

Ajax

$.ajax({                       
    url: 'url for loading the data',                    
    data: {
      'c': c's Id       
    },
    success: function (data) {   
      $("#D").html(data);  
    }
  });

html:

<option value="">---------</option>
{% for d in D %}
<option value="{{ d.pk }}">{{ d.name }}</option>
{% endfor %}

views.py:

def load_d(request):
   c_id = request.GET.get('c')
   D = State.objects.filter(c_id=c_id).order_by('name')
   return render(request, 'd_list.html', {'D': D})

Я решил эту проблему с помощью этого учебника: https://youtu.be/xhUUzl7-vRg

С помощью этого руководства я также смог добавить более двух селектов для моего выпадающего цепного списка.

Вернуться на верх