Я пишу некоторый код AJAX, который принимает выбранное значение раскрывающегося списка и отправляет запрос Post в представление, которое возвращает в переменную некоторые данные из базы данных. Мне нужно заполнить второй выпадающий список данными из этой переменной. Все работает отлично, за исключением последней части, где я не могу заполнить раскрывающийся список.
В приведенном ниже коде html «reg2» - это мой первый раскрывающийся список, а «dep» - тот, который должен быть заполнен:
<select name="reg2" class="toChange">
{% for item in regions %}
<option val="{{ item }}" {% ifequal item reg %} selected {% endifequal %}> {{ item }} </option>
{% endfor %}
</select>
<script type="text/javascript">
function dropdownChange () {
var selectedRegion = $(".toChange option:selected").val();
$.ajax({
url: '/estimmo/templates/',
type: 'POST',
data: {'reg2': selectedRegion},
});
$("#dep").val(query_results);
}
$(".toChange").change(dropdownChange);
</script>
<select id="dep" name="dep">
{% for item in departements %}
<option val="{{ item }}"> {{ item }} </option>
{% endfor %}
</select>
Сценарий AJAX вызывает следующее представление:
@csrf_exempt
def MyView(request):
if request.method == 'POST' and request.is_ajax:
result_r = request.POST.get('reg2')
regions = data_immo.objects.values_list("nom_reg", flat=True).distinct().order_by('nom_reg')
departements = data_immo.objects.values_list("insee_dep").filter(Q(nom_reg=result_r)).distinct()
query_results_dict = {
'regions': regions,
'departements': departements,
}
return render(request,'home.html', query_results_dict)
Кажется, что до этого все хорошо. Запрос Post работает, и мне удалось собрать в переменной «departements» нужные мне данные.
Сначала я думал, что выпадающий список «dep» будет автоматически заполнен, но это не так. Затем я подумал, что, возможно, мне нужно заполнить этот выпадающий список с помощью скрипта JS / AJAX. Я провел некоторое исследование rnet и попробовал следующий AJAX код, который я вставил в конец моего скрипта:
$("#dep").val(departements);
К сожалению, это не сработало. Я чувствую, что я почти там, и я думаю, что это должно быть довольно просто, но я не мог найти ничего полезного. Не могли бы вы помочь?
ОБНОВЛЕНИЕ: после предложений @xxMrPHDxx я изменил свой код:
views.py:
# code added below the 'departements' variable
name = []
value = []
for d in departements:
name.append(d['insee_dep'])
value.append(d['insee_dep'])
data = {
"name": name,
"value": value,
}
return JsonResponse({'data':data})
html исправление сценария:
<script type="text/javascript">
function dropdownChange () {
var selectedRegion = $(".toChange option:selected").val();
$.ajax({
url: '/estimmo/templates/home.html',
type: 'POST',
data: {'reg2': selectedRegion},
success: data=>{
// Assuming data is in stringified JSON format
data = JSON.parse(data);
// Get the dep div
const dep = $("#dep");
const options = '';
// Loop through all the options
for(const row of data.rows){
options += `<option value=${row.value}>${row.name}</tr>`;
}
// Set the dep innerHTML?
dep.html(options);
}
});
К сожалению, он все еще не работает. Я неправильно понял, что мне нужно было сделать?