django和ajax下拉列表基于选定的下拉列表

Question

我正在尝试根据所选的下拉菜单创建下拉菜单并过滤这些结果。

到目前为止我做了什么：

project_dropdown_options.html:

<option value="">---------</option>
{% for sw in result %}
<option value="{{ sw.pk }}">{{ sw.pk  }}</option>
{% endfor %}

view.py：(我检查了结果，我得到了值。(

def projects_dropdown(request):
id = request.GET.get('id')
print(id)
result = list(SWTypes.objects.filter(proje=int(id)).values('swtype'))
return render(request, 'project_dropdown_options.html', {'result': result})

url.py

path('ajax/projects-sw/', views.projects_dropdown, name='ajax_projects_dropdown'),

Ajax脚本：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#projects").change(function () {
var url = $("#personForm").attr("projects-drop-url");  
var id = $(this).val();  // get the selected projectID from the HTML input
$.ajax({                       // initialize an AJAX request
url: url,                   
data: {
'id': id       // add the project id to the GET parameters
},
success: function (data) {   
$("#sw").html(data);  
}
});
});
</script>

html页面，下拉列表为：

<select name="projects">
{% for instance in projects%}
<option value={{ instance.id }}>{{ instance.project_title }}</option>
{% endfor %}</td>
<td>
<form method="post" id="personForm" projects-drop-url="{% url 'ajax_projects_dropdown' %}" novalidate>
{% csrf_token %}
<select name="sw" id="sw">
<option value="">Switch Type</option>
</td>
</form>

我想我在Ajax脚本或下拉菜单所在的html部分都有错误。你知道我在哪里出错吗？我没有得到任何错误，在第二个下拉菜单上也没有得到任何值，它被称为"sw"，我得到了第一个下拉菜单的值。

Answer 1

您在QuerySet中使用values方法，并且在呈现project_dropdown_options.html时仅在上下文中发送swtype字段值

要么删除values方法

result = SWTypes.objects.filter(proje=int(id))

或者将pk也添加到values中

result = SWTypes.objects.filter(proje=int(id)).values('pk', 'swtype')

此外，您不必将QuerySet转换为list，您也可以在模板中循环Queryset

<option value="">---------</option>
{% for sw in result %}
<option value="{{ sw.pk }}">{{ sw.swtype }}</option>
{% endfor %}

更新

更改您的父HTML，将select标记的name属性替换为id，因为您在id上附加了JQuery更改事件，即$("#projects").change

<td>
<!-- add id in place of name -->
<select id="projects">
{% for instance in projects%}
<option value={{ instance.id }}>{{ instance.project_title }}</option>
{% endfor %}
</select>
</td>
<td>
<form method="post" id="personForm" projects-drop-url="{% url 'ajax_projects_dropdown' %}" novalidate>
{% csrf_token %}
<select name="sw" id="sw">
<option value="">Switch Type</option>
</select>
</form>
</td>

更新2

更改ajax调用，删除data属性并将id附加到URL本身作为查询参数，然后使用文档on事件

$(document).on('change', 'select#projects', function () {
var url = $("#personForm").attr("projects-drop-url");  
var id = $(this).val();
console.log("urls and project_id", url, id);
$.ajax({
type: "GET",
url: url + "?id="+ id,
success: function (data) {   
$("#sw").html(data);  
}
});
});