Заполнение раскрывающегося списка переменной django после вызова AJAX - PullRequest
Новая
       3

Заполнение раскрывающегося списка переменной django после вызова AJAX

0 голосов
/ 08 марта 2020

У меня есть выпадающий список, который вызывает вызов AJAX, когда выбрано новое значение. Скрипт AJAX вызывает мое представление Django, которое возвращает переменную (список значений). Кажется, он работает до того момента, когда мне нужно заполнить второй выпадающий список значениями из этого списка. Я не мог понять, как это сделать.

Вот мой html код: 

<form class="wrapper" action="" method="post"> {% csrf_token %} 

  <select name="myVal" class="toChange">
    <option val="1">1</option>  
    <option val="2">2</option>   
  </select>

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


  <script type="text/javascript">
    function dropdownChange () {
      var selectedValue = $(".toChange option:selected").val();
      $.ajax({
              url: '/myApp/templates/3/',
              type: 'POST',
              data: {'myVal': selectedValue},
              success: function(result) {
                alert(result);
              }
              }); 
    }
    $(".toChange").change(dropdownChange);

  </script>

</form>

А вот мой файл views.py: 

@csrf_exempt
def MyView3(request):

    if request.method == 'POST' and request.is_ajax:

        myVariable = json.dumps(["1", "2", "3", "4", "a"]) 


        return HttpResponse(myVariable , content_type='application/json')
    else:
        return render(request,'home3.html')

Когда я выбираю новое значение в раскрывающемся списке, он вызывает вызов AJAX, и строка предупреждения (результата) возвращает «1,2,3,4, a». Так что эта часть работает, но я не знаю, как заполнить этими значениями мой выпадающий список "dep".

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

    var select = document.getElementById("dep");
    var options = result
    for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);

Я не уверен, был ли этот код просто неуместным, или он просто не подходит для использования. Кто-нибудь знает, что мне здесь делать? Спасибо

1 Ответ

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

Вы можете сделать это намного проще в success атрибуте ajax запроса: 

        success: function(data) {
            var str = '';
            data.forEach(function(opt){
                str += '<option value="' + opt + '">' + opt + '</option>';
            });
            document.getElementById("dep").innerHTML = str;
        }
...