Django: Попытка заполнить раскрывающийся список с помощью Javascript - PullRequest
Новая
       1

Django: Попытка заполнить раскрывающийся список с помощью Javascript

1 голос
/ 05 марта 2020

У меня есть два выпадающих списка, и я пытаюсь заполнить второй, используя Javascript, когда меняется первый. Он должен быть заполнен из значений базы данных, содержащихся в переменной «departements» моего файла views.py.

Я нашел какой-то код в Интернете, но он не работал, когда я пытался применить его к своему делу. У меня около 0 знаний в Javascript, так что не знаю, нахожусь ли я даже на правильном пути.

Ниже приведена более подробная информация о моих файлах:

models.py 

class data_immo(models.Model):
    id = models.AutoField(primary_key=True)
    insee_dep = models.IntegerField(db_column='INSEE_DEP', blank=True, null=True) 
    nom_reg = models.TextField(db_column='NOM_REG', blank=True, null=True)  

    class Meta:
        managed = True
        db_table = 'immo'

views.py 

def MyView(request):

    query_results = data_immo.objects.all()
    regions = data_immo.objects.values_list("nom_reg", flat=True).distinct()
    departements = data_immo.objects.values_list("insee_dep", flat=True).distinct()

    query_results_dict = {
        'query_results': query_results,
        'regions': regions,
        'departements': departements,
    }

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

home. html

<select id="reg" name="reg" onChange="populate2()"> 
 {% for item in regions %}
 <option val="{{ item.nom_reg }}"> {{ item.nom_reg }} </option>    
 {% endfor %}
</select>

<select id="dep" name="dep"></select>

<script type="text/javascript">
 function populate2(){      
 $('.dep').append('<option>' + departements[0].insee_dep  + '</option');
      }
</script>

Мне нужна функция populate2 (), чтобы обновить выпадающий список dep. Функция явно неправильная, но я не знаю, где именно. Заранее спасибо!

1 Ответ

1 голос
/ 05 марта 2020

(ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Прошло много времени с тех пор, как я последний раз использовал Django)

Некоторые вещи, которые я замечаю:

  1. Вы запрашиваете элемент как .dep, а не #dep. . запрашивает атрибут class элемента HTML, а # запрашивает его id.

  2. Закрывающий тег для параметров (</option>) имеет опечатка

  3. departements существует только на стороне сервера. Вы не можете использовать его как переменную непосредственно из javascript.

Если я правильно понимаю ваш вопрос, вы можете захотеть что-то вроде следующего, если используете браузерные API 

function populate2() {
    let depSelect = document.querySelector('#dep');
    let option;
    {% for d in departements %}
    option = document.createElement("OPTION");
    option.innerText = "{{ d.insee_dep }}";
    option.value = "{{ d.insee_dep }}";
    depSelect.appendChild(option);
    {% endfor %}
}

или jQuery

function populate2() {
    let depSelect = $('#dep');
    {% for d in departements %}
    $($.parseHTML('<option></option>'))
        .text("{{ d.insee_dep }}")
        .val("{{ d.insee_dep }}")
        .appendTo(depSelect);
    {% endfor %}
}
...