jquery - django 和 ajax 依赖的 html 选择列表(级联下拉列表)

Question

我是 Django 新手(我使用 Django 1.4 和 python 2.7)，无法理解如何完成以下问题。

我在 SO 和 Google 上进行了大量搜索，到目前为止，我对如何解决这个问题感到非常困惑。

我在表单上有两个 html 选择列表 - 行业和部门。当用户从行业 html 选择列表中选择工程时，部门 html 选择列表应仅动态填充工程选项。与行业 html 选择列表中所做的其他选择相同。扇区 html 选择列表应动态填充，无需刷新页面 - 因此我假设必须使用 JQuery/AJAX。

我不太确定我是否正确设置了下面的 UserProfile 模型。 Industry & Sector html 选择列表显示在表单和工作中，但彼此不依赖 - 它们是单独的 models.PositiveIntegerField 字段。也许“行业和部门”值应该是下面的 UserProfile 模型上的外键。 我需要一些建议。

这是我的用户 models.py 文件:

class UserProfile(models.Model):

    SELECT_INDUSTRY = 0
    ACCOUNTING = 1
    ADMINISTRATION_OFFICE_SUPPORT = 2
    BANKING_FINANCIAL_SERVICES = 3
    CALL_CENTRE_CUSTOMER_SERVICE = 4
    COMMUNITY_SERVICES_DEVELOPMENT = 5
    CONSTRUCTION = 6
    CONSULTING_STRATEGY = 7
    DESIGN_ARCHITECTURE = 8
    EDUCATION_TRAINING = 9
    ENGINEERING = 10
    EXECUTIVE_GENERAL_MANAGEMENT = 11
    FARMING_ANIMALS_CONSERVATION = 12
    GOVERNMENT_DEFENCE = 13
    GRADUATE_ENTRY_LEVEL = 14
    HEALTHCARE_MEDICAL = 15
    HOSPITALITY_TRAVEL_TOURISM = 16
    HUMAN_RESOURCES_RECRUITMENT = 17
    INSURANCE_SUPERANNUATION = 18
    INFORMATION_TECHNOLOGY_TELECOMMUNICATIONS = 19
    LEGAL = 20
    MANUFACTURING = 21
    MARKETING_COMMUNICATIONS = 22
    MEDIA_ADVERTISING_ARTS_ENTERTAINMENT = 23
    MINING_RESOURCES_ENERGY = 24
    REAL_ESTATE_PROPERTY = 25
    RETAIL_CONSUMER_PRODUCTS = 26
    SALES = 27
    SCIENCE_TECHNOLOGY = 28
    SELF_EMPLOYMENT = 29
    SPORT_RECREATION = 30
    TRADES_SERVICES = 31
    TRANSPORT_LOGISTICS = 32


    USER_PROFILE_CURRENT_INDUSTRY_TYPES = (
        (SELECT_INDUSTRY, _('Select Current Industry')),
        (ACCOUNTING, _('Accounting')),
        (ADMINISTRATION_OFFICE_SUPPORT, _('Administration & Office Support')),
        (BANKING_FINANCIAL_SERVICES, _('Banking & Financial Services')),
        (CALL_CENTRE_CUSTOMER_SERVICE, _('Call Centre & Customer Service')),
        (COMMUNITY_SERVICES_DEVELOPMENT, _('Community Services & Development')),
        (CONSTRUCTION, _('Construction')),
        (CONSULTING_STRATEGY, _('Consulting & Strategy')),
        (DESIGN_ARCHITECTURE, _('Design & Architecture')),
        (EDUCATION_TRAINING, _('Education & Training')),
        (ENGINEERING, _('Engineering')),
        (EXECUTIVE_GENERAL_MANAGEMENT, _('Executive & General Management')),
        (FARMING_ANIMALS_CONSERVATION, _('Farming, Animals & Conservation')),
        (GOVERNMENT_DEFENCE, _('Government & Defence')),
        (GRADUATE_ENTRY_LEVEL, _('Graduate / Entry Level')),
        (HEALTHCARE_MEDICAL, _('Healthcare & Medical')),
        (HOSPITALITY_TRAVEL_TOURISM, _('Hospitality, Travel & Tourism')),
        (HUMAN_RESOURCES_RECRUITMENT, _('Human Resources & Recruitment')),
        (INSURANCE_SUPERANNUATION, _('Insurance & Superannuation')),
        (INFORMATION_TECHNOLOGY_TELECOMMUNICATIONS, _('Information Technology & Telecommunications')),
        (LEGAL, _('Legal')),
        (MANUFACTURING, _('Manufacturing')),
        (MARKETING_COMMUNICATIONS, _('Marketing & Communications')),
        (MEDIA_ADVERTISING_ARTS_ENTERTAINMENT, _('Media, Advertising, Arts & Entertainment')),
        (MINING_RESOURCES_ENERGY, _('Mining, Resources & Energy')),
        (REAL_ESTATE_PROPERTY, _('Real Estate & Property')),
        (RETAIL_CONSUMER_PRODUCTS, _('Retail & Consumer Products')),
        (SALES, _('Sales')),
        (SCIENCE_TECHNOLOGY, _('Science & Technology')),
        (SELF_EMPLOYMENT, _('Self Employment')),
        (SPORT_RECREATION, _('Sport & Recreation')),
        (TRADES_SERVICES, _('Trades & Services')),
        (TRANSPORT_LOGISTICS, _('Transport & Logistics'))
    )


    SELECT_SECTOR_TYPE = 0
    _ALL_ACCOUNTING_JOBS = 1
    ....(culled for brevity)
    _ALL_ENGINEERING_JOBS = 124
    AEROSPACE_ENGINEERING = 125
    AUTOMOTIVE_ENGINEERING = 126
    BUILDING_SERVICES_ENGINEERING = 127
    CHEMICAL_ENGINEERING = 128
    CIVIL_STRUCTURAL_ENGINEERING = 129
    ELECTRICAL_ELECTRONIC_ENGINEERING = 130
    ENGINEERING_DRAFTING = 131
    ENVIRONMENTAL_ENGINEERING = 132
    FIELD_ENGINEERING = 133
    INDUSTRIAL_ENGINEERING = 134
    MAINTENANCE = 135
    MANAGEMENT = 136
    MATERIALS_HANDLING_ENGINEERING = 137
    MECHANICAL_ENGINEERING = 138
    PROCESS_ENGINEERING = 139
    PROJECT_ENGINEERING = 140
    PROJECT_MANAGEMENT = 141
    SUPERVISORS = 142
    SYSTEMS_ENGINEERING = 143
    WATER_WASTE_ENGINEERING = 144
    OTHER_ENGINEERING_JOBS = 145
    _ALL_EXECUTIVE_GENERAL_MANAGEMENT_JOBS = 146
    ....(culled for brevity)
    OTHER_TRANSPORT_LOGISTICS_JOBS = 462


    USER_PROFILE_CURRENT_SECTOR_TYPES = (
        (SELECT_SECTOR_TYPE, _('Select Current Sector')),
        .......(culled for brevity)
        (OTHER_TRANSPORT_LOGISTICS_JOBS, _('Other Transport & Logistics Jobs'))
    )

    user = models.OneToOneField(User)
    ....(culled for brevity)
    current_industry_type = models.PositiveIntegerField(choices=USER_PROFILE_CURRENT_INDUSTRY_TYPES, default=SELECT_INDUSTRY, validators=[MinValueValidator(1)])
    current_sector_type = models.PositiveIntegerField(choices=USER_PROFILE_CURRENT_SECTOR_TYPES, default=SELECT_SECTOR_TYPE, validators=[MinValueValidator(1)])
    ....(culled for brevity)
    .

我见过django-smart-selects ，但我不确定这是一个动态解决方案，并且我不确定是否必须为行业和部门添加单独的模型，然后将行业和部门的外键添加到上面的 UserProfile 模型中。

我希望能够通过 AJAX 或 JQuery 轻松获得相互依赖的行业和部门 html 选择列表。

如有任何建议和帮助，我们将不胜感激。

Answer 1

当我遇到这个问题时，我使用AJAX来创建2个选择依赖项。首先，我使用 Django 表单，例如:

# I avoid the importation of the choices to make answer shorter
class YourForm(forms.Form):    
    industry = forms.ChoiceField(choices=USER_PROFILE_CURRENT_INDUSTRY_TYPES)
    sector = forms.ChoiceField(choices=USER_PROFILE_CURRENT_SECTOR_TYPES)    
    # ... other fields

我将避开 View 的基础知识(如何管理 GET/POST 方法)和基本的 HTML django 表单，我将直接进入 AJAX 功能:

假设选择器 ID 为:#id_sector 和 #id_industry

function get_industry(){
            jQuery.ajax({
              async: false,
              type: "POST",
              url: "/a/get/industry/",
              data: "sector_id=" + $('#id_sector').val(),
              success: function(response) {
                    result = JSON.parse(response);
                    if (result) {
                        // I usually receive a list of items here
                        // I use this list to replace the dependant select                                                

                        $('#id_industry').empty()  // Use to empty the select

                        // Now we append the industry options we've received
                        for(var i=0;i < result.item_list.length;i++){
                            $('#id_industry').append($('<option>', { 
                                value: result.item_list[i]['id'],
                                text: result.item_list[i]['name'] 
                        }));      
                        }

                    } else {
                        console.log('error');
                    }
                }
            });
        }

function get_sector(){
            jQuery.ajax({
              async: false,
              type: "POST",
              url: "/a/get/sector/",
              data: "industry_id=" + $('#id_industry').val(),
              success: function(response) {
                    result = JSON.parse(response);
                    if (result) {
                        $('#id_sector').empty()  // Use to empty the select

                        // Now we append the sector options we've received
                        for(var i=0;i < result.item_list.length;i++){
                            $('#id_sector').append($('<option>', { 
                                value: result.item_list[i]['id'],
                                text: result.item_list[i]['name'] 
                        }));                                                   
                        }

                    } else {
                        console.log('error');
                    }
                }
            });
        }

现在我将展示 AJAX View 。您可以在名为 ajax.py 的文件中设置 AJAX View :

from yourapp.models import USER_PROFILE_CURRENT_SECTOR_TYPES

INDUSTRY_DICT = {
    4: range(14,36),
    5: range(36,58),
    6: range(58,80),
    7: range(80,102),
    8: range(102,124),
    10: range(124,146)  # This is the only true equivalence that you passed to me
}

@csrf_exempt
def get_sectors(request):
    response = []
    industry_id = int(request.POST['industry_id'])

    # With the sector_id you know wich sector the user has selected
    # You should generate the list based in your needs
    data = []
    if industry_id:
        sectors = INDUSTRY_DICT[industry_id]  # This return a list of ID's of sectors
        # Then make loop over all sectors
        for sector_id in sectors:  
            # To get the sector name you should use another dict
            # I think you already have it in USER_PROFILE_CURRENT_SECTOR_TYPES
            # Remember to import it (check above)
            sector_name =  USER_PROFILE_CURRENT_SECTOR_TYPES[sector_id]
            # We append the id and the name to replace options in the HTML
            data.append({'id':sector_id, 'name':sector_name})  

        response = { 'item_list':data }  # We send back the list
        return HttpResponse(simplejson.dumps(response))

    # If we get any error, or cannot get the sector, we send an empty response
    response = {}
    return HttpResponse(simplejson.dumps(response))

我将避免添加第二个 AJAX 函数“get_sectors”，因为我认为您理解逻辑，它应该与此函数相同，但您会收到industry_id 而不是 sector_id，我认为您可以面对第二个函数。

设置 url 之前的最后一步是定义管理选择更改并调用 AJAX 函数的函数:

    $("#id_sector").change(function(){           
            get_industry();  // AJAX function call when sector is selected           
    });

    $("#id_industry").change(function(){           
            get_sector();  // AJAX function call when industry is selected             
    });

您需要在 urls.py 中添加两个网址:

# ... YOUR OTHER URLS
url(r'^a/get/industry/?$', 'yourproject.ajax.get_industries', name='get_industries'),
url(r'^a/get/sector/?$', 'yourproject.ajax.get_sectors', name='get_sectors'),

提示:

• 当您看到 $('#id_industry') 时，它指的是行业选择器 ID，与 $('#id_sector') 指的是扇区选择器 ID

• 我所说的 AJAX 函数位于 HTML 模板中

• 我所说的 AJAX View 位于 .py 文件中，我通常将 AJAX View 添加到 ajax.py 文件
• 在这个例子中，我在AJAX View 中添加了@csrf_exempt，如果您想知道如何在中管理CSRF token AJAX功能，您可以前往:CSRF & AJAX: Official Docs
• 在 AJAX View 中，您可以看到用户选择的扇区:
  • 您需要生成行业列表
  • 该列表将用于生成选择的选项
  • 您可以通过多种不同的方式来实现此目的，您应该选择更适合您的场景的一种。
  • 我将发送 ID，但如果更适合您，您可以发送姓名

编辑:过滤部门/行业

• get_industries(request) 更改为 get_sectors(request)

首先你应该有等价物，你可以用不同的方式拥有它们，你可以有2个模型行业和部门，并使用外键将它们关联起来，但我认为你没有模型，所以你可以有2个字典，一项用于行业，一项用于部门。

我会假设等价，您应该将字典的值更改为您需要的值:

INDUSTRY_DICT = {
4: range(14,36),
5: range(36,58),
6: range(58,80),
7: range(80,102),
8: range(102,124),
10: range(124,146)  # This is the only equivalence that you passed to me
}

这将生成一个字典，如果您执行INDUSTRY_DICT[industry_id]，它将返回应出现在选择中的扇区的 ID 列表。检查上面的函数是否有新的变化。

• 我还建议您再添加 2 个函数来“重新启动”选择并再次追加所有可能的选项，以防用户想要更改其选择