创建Django依赖下拉列表不会自动填充第二个下拉列表

我正在尝试使用此代码创建两个下拉列表，其中第二个下拉列表取决于第一个下拉列表。 但是我无法首先填充第二个下拉列表。 这是我关注的post：

http://www.devinterface.com/blog/2011/02/how-to-implement-two-dropdowns-dependent-on-each-other-using-django-and-jquery/ 

这是我的views.py函数：

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")

我的createNewLocality.html文件：

        $(document).ready( function() { $("select#tag").change(function() { if ($(this).val() == 'Z') { $("select#parent").html("Select a parent"); $("select#parent").attr('disabled', true); } else { var url = "tag/" + $(this).val() + "/all_json_models"; var tag = $(this).val(); $.getJSON(url, function(parents) { var options = 'Select a parent'; for (var i = 0; i < parents.length; i++) { options += '' + parents[i].fields['name'] + ''; } $("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; } }); });    {% if term %} 
 Create a new entry in locality table for {{ term }} 
 Enter Tag: 
  Select a Tag {% for entry in tag_list %} {{ entry.name }} {% endfor %}  
 
 Enter Parent: 
  Select a parent  
 
  
 {% endif %}   

urls.py

 url(r'^createNewLocality/(?P[A-Za-z]+)$',views.createNewLocality), url(r'^tag/(?P[-\w]+)/all_json_models/$', views.all_json_models), 

Answer 1

您可以尝试执行以下操作：将onSelect业务逻辑移动到单独的方法中，并在页面加载时对其进行评估。 这样你就可以达到预期的效果。 我没有深入到你的代码，但这应该做的伎俩：

  var onTagChange = function() { var selectedTag = $("select#tag option:selected"); if (selectedTag.val() == 'Z') { $("select#parent").html("Select a parent"); $("select#parent").attr('disabled', true); } else { var url = "tag/" + selectedTag.val() + "/all_json_models"; var tag = selectedTag.val(); $.getJSON(url, function(parents) { var options = 'Select a parent'; for (var i = 0; i < parents.length; i++) { options += '' + parents[i].fields['name'] + ''; } $("select#parent").html(options); $("select#parent option:first").attr('selected', 'selected'); $("select#parent").attr('disabled', false); }); } } $("select#tag").change(onTagChange); onTagChange();