我正在编写一些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)
似乎直到这里,一切都很好。发布请求有效,我设法在“部门”变量中捕获了我需要的数据。
我起初以为'dep'下拉列表会被自动填充,但事实并非如此。然后我以为我可能需要通过JS / AJAX脚本填充该下拉菜单。我进行了一些互联网研究,并尝试了以下在脚本末尾插入的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);
}
});
不幸的是,它仍然无法正常工作。我是否误解了我需要做什么?
我不了解django,但是我最好的方法是通过JavaScript本身。在函数dropdownChange()
中的$.ajax(...)
调用中,添加success
属性并在其中填充select
元素。范例
$.ajax({
url: '/estimmo/templates/',
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);
}
});
假设data.rows
是具有name
和value
属性的数组