创建依赖于Django的下拉列表不会自动填充第二个下拉列表 [英] Create Django dependent dropdown list doesnot autopopulate second dropdown
问题描述
我正在尝试使用此代码创建两个下拉菜单，其中第二个下拉菜单取决于第一个下拉菜单.但是我无法根据第一个填充第二个下拉列表.这是我关注的帖子:
I am trying this code to create two dropdowns where the second dropdown depends on the first. But I am unable to populate the second dropdown based on first. This is the post that I am following:
http://www.devinterface.com/blog/2011/02/how-to-implement-two-dropdowns-dependent-on-each-other-using-django-and-jquery/
这是我的views.py函数:
This is my views.py function:
def createNewLocality(request,newLocality):
return render(request, 'locality/createNewLocality.html', {'term': newLocality,'tag': tagList()})
def createNewLocality(request,newLocality):
return render(request, 'locality/createNewLocality.html', {'term': newLocality,'tag': tagList()})
def all_json_models(request, tag):
current_tag = Tag.objects.get(pk=tag)
parents = Tag.objects.all().filter(parent__lt=current_tag)
json_parents = serializers.serialize("json", parents)
return HttpResponse(json_parents, content_type="application/javascript")
def all_json_models(request, tag):
current_tag = Tag.objects.get(pk=tag)
parents = Tag.objects.all().filter(parent__lt=current_tag)
json_parents = serializers.serialize("json", parents)
return HttpResponse(json_parents, content_type="application/javascript")
我的createNewLocality.html文件:
My createNewLocality.html file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Create New Locality</title>
<script src="{{ STATIC_URL }}admin/js/jquery.min.js">
$(document).ready(
function() {
$("select#tag").change(function() {
if ($(this).val() == 'Z') {
$("select#parent").html("<option>Select a parent</option>");
$("select#parent").attr('disabled', true);
}
else {
var url = "tag/" + $(this).val() + "/all_json_models";
var tag = $(this).val();
$.getJSON(url, function(parents) {
var options = '<option value="Z">Select a parent</option>';
for (var i = 0; i < parents.length; i++) {
options += '<option value="' + parents[i].pk + '">' + parents[i].fields['name'] + '</option>';
}
$("select#parent").html(options);
$("select#parent option:first").attr('selected', 'selected');
$("select#parent").attr('disabled', false);
});
}
});
$("select#parent").change(function(vent) {
if ($(this).val() == -1) {
return;
}
});
});
</script>
</head>
<body>
{% if term %}
<p> Create a new entry in locality table for {{ term }} </p>
Enter Tag:
<form method="get" action="">
<select name="tag" id="tag">
<option value="Z">Select a Tag</option>
{% for entry in tag_list %}
<option value="{{ entry.id }}">{{ entry.name }}</option>
{% endfor %}
</select>
<br/>
<br/>
Enter Parent:
<br/>
<select name="parent" id="parent" disabled="true">
<option>Select a parent</option>
</select>
<br/>
<br/>
<input type="submit" value="Submit" />
</form>
{% endif %}
</body>
</html>
urls.py
url(r'^createNewLocality/(?P<newLocality>[A-Za-z]+)$',views.createNewLocality),
url(r'^tag/(?P<tag>[-\w]+)/all_json_models/$', views.all_json_models),
推荐答案
您可以尝试执行以下操作:将onSelect业务逻辑移动到单独的方法中，并在页面加载时对其进行评估.这样您就可以达到预期的效果.我对您的代码没有更深入的了解，但这应该可以解决问题:
You can try to do the following: Move your onSelect business logic into a separate method and evaluate it on page load. This way you should achieve the desired effect. I didn't get much deeper into your code, but this should do the trick:
var onTagChange = function() {
var selectedTag = $("select#tag option:selected");
if (selectedTag.val() == 'Z') {
$("select#parent").html("<option>Select a parent</option>");
$("select#parent").attr('disabled', true);
}
else {
var url = "tag/" + selectedTag.val() + "/all_json_models";
var tag = selectedTag.val();
$.getJSON(url, function(parents) {
var options = '<option value="Z">Select a parent</option>';
for (var i = 0; i < parents.length; i++) {
options += '<option value="' + parents[i].pk + '">' + parents[i].fields['name'] + '</option>';
}
$("select#parent").html(options);
$("select#parent option:first").attr('selected', 'selected');
$("select#parent").attr('disabled', false);
});
}
}
$("select#tag").change(onTagChange);
onTagChange();
这篇关于创建依赖于Django的下拉列表不会自动填充第二个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
