Django Admin，如何根据另一个选择填充选择选项

Question

我的场景:

我有三个表，类别，子类别，产品。
插入新产品时，有两个选择框

1)第一个选择用于类别(其工作)

2)第二个是子类别，它应该与第一个选择相关。需要从子类别表中获取数据。

子类别表将类别 id 作为外键。
我是初学者，请有人帮助。

Answer 1

You will have to use some JS library I prefer JQuery.

要填充此子类别字段，您必须创建一个 View ，该 View 将使用 json 数据进行响应。

from django.http import HttpResponse
import json

def get_subcategory(request): 
    id = request.GET.get('id','') 
    result = list(Subcategory.objects.filter(category_id=int(id)).values('id', 'name')) 
    return HttpResponse(json.dumps(result), content_type="application/json") 

在 urls.py 你需要添加一个模式来访问 View :

url(r'^/getSubcategory/$', views.get_subcategory) 

现在你必须覆盖 change_from.html django admin 为您的产品应用程序添加一些 JS 代码来实现魔法。

your_project
     |-- your_project/
     |-- myapp/
     |-- templates/
          |-- admin/
              |-- myapp/
                  |-- change_form.html  # do not misspell this

Note: The location of this file is not important. You can put it inside your app and it will still work. As long as its location can be discovered by django. What's more important is the name of the HTML file has to be the same as the original HTML file name provided by django.

在您的 change_form.html ，这样写:

{% extends "admin/change_form.html" %} 

{% block extrahead %}
    {{ block.super }} 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
        $(function(){ 
            // inspect html to check id of category select dropdown.
            $(document).on('change', "select#id_category", function(){ 
                $.getJSON("/getSubcategory/",{id: $(this).val()}, function(j){ 
                     var options = '<option value="">---------</option>'; 
                     for (var i = 0; i < j.length; i++) { 
                         options += '<option value="' + j[i].id + '">' + j[i].name + '</option>'; 
                     } 
                     // inspect html to check id of subcategory select dropdown.
                     $("select#id_subcategory").html(options); 
                 }); 
             }); 
         }); 
    </script>
{% endblock %} 
# Create a JS file and put this second script tag in it, that way will be easier to maintain your template.