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

本文介绍了创建依赖于Django的下拉列表不会自动填充第二个下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用此代码创建两个下拉菜单，其中第二个下拉菜单取决于第一个下拉菜单.但是我无法根据第一个填充第二个下拉列表.这是我关注的帖子:

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 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的下拉列表不会自动填充第二个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！