Question

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

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文件：

＆＃13;

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

＆＃13;

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

Answer 1

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

 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依赖下拉列表不会自动填充第二个下拉列表

1 个答案: