Визуализировать ключевое значение словаря на основе события в Django - PullRequest
Новая
       5

Визуализировать ключевое значение словаря на основе события в Django

0 голосов
/ 19 июня 2020

У меня есть два раскрывающихся списка в моем. html файле приложения Django, а именно: 

        <select class="form-control" id="exampleFormControlSelect1">

          <option>op1</option>


        </select>
        <select class="form-control" id="exampleFormControlSelect2">

          <option>opt1</option>

        </select>

Словарь отображается из Django views.py. Я хочу, чтобы ключи отображались в качестве параметров в первом раскрывающемся списке и всякий раз, когда выбирается ключ, соответствующие значения должны отображаться во втором раскрывающемся списке. Я пробовал некоторые js и шаблон jina, но безуспешно. Как я могу его реализовать? Я пробовал следующее js: 

function myFunction() {

  var dict=[];
  dict.push("{{Names}}");
  alert(Object.keys(dict));

}

Мой возвращенный словарь имеет форму: 

Names={1991:["cat & dog","Mat-bat","task force"],1992:["average life span!","text-user"]}

вывод: 0 Django views.py:

def home(requests):
    return render(requests,'home/index.html',{"Names":getNames()})

1 Ответ

1 голос
/ 19 июня 2020

Вы можете использовать рендеринг шаблона Django для заполнения первого раскрывающегося списка, например: 

<select class="form-control" id="exampleFormControlSelect1">
    {% for key, values in yourdict %}
    <option value={{ values }}>{{ key }}</option>
    {% endfor %}
</select>

Убедитесь, что вы передали свою словарную переменную в шаблон и заменили «yourdict» любым из вашего словаря. вызывается переменная.

Затем вам нужно использовать javascript / jquery для заполнения второго раскрывающегося списка. Добавьте функцию onchange в свой первый раскрывающийся список: 

<select class="form-control" id="exampleFormControlSelect1" onchange="populateSecond()"></select>

Затем в JS вы можете определить эту функцию: 

function populateSecond() {
   var select1 = document.getElementById("exampleFormControlSelect1");       
   var select2 = document.getElementById("exampleFormControlSelect2");       
   var selectedValue = select1.options[select1.selectedIndex].value;
   selectedValue.forEach(function(element){       
       select2.appendChild(element);  
   }     
}

Это требует, чтобы ваши сохраненные значения в первом раскрывающемся списке распознавались как массив. Я не уверен, что они будут недоступны, но если нет, вам, возможно, придется преобразовать значение selectedValue из строки в массив с помощью метода split ()

...