如何实现项目选择联动对应公司下拉框（无页面刷新）

方案一：前端本地数据联动（适合数据量小的场景） #

这种方式无需额外后端接口，提前将项目与公司的关联数据传递到前端，通过JavaScript动态生成对应选项。

1. 后端调整数据传递

在Python后端整理项目与公司的映射关系，一起传递到页面：

# 假设projects和companies是从数据库获取的数据集
project_company_map = {}
for project in projects:
    # 筛选当前项目对应的所有公司
    matched_companies = [comp for comp in companies if comp.destinationindicator == project.name]
    project_company_map[project.name] = matched_companies

# 渲染模板时传入映射关系
return render_template(
    'your_page.html',
    projects=projects,
    project_company_map=project_company_map
)

2. HTML结构调整

保留项目选择框，将公司相关区域拆分固定文本框和选择框，初始均隐藏：

<!-- 项目选择框 -->
<select id="project-select">
    {% for project in projects %}
        <option value="{{ project.name }}">{{ project.name }}</option>
    {% endfor %}
</select>

<!-- ASAS对应的固定不可修改文本框 -->
<div id="fixed-company-area" style="display: none;">
    <input type="text" value="Fa_Test" disabled>
</div>

<!-- 其他项目对应的公司选择框容器 -->
<div id="company-select-area" style="display: none;">
    <select id="company-select"></select>
</div>

3. JQuery动态联动逻辑

监听项目选择框的变化事件，根据选中的项目切换显示区域并生成对应公司选项：

// 将后端传递的映射转成JavaScript对象
const projectCompanyMap = {{ project_company_map|tojson }};

$(document).ready(function() {
    const $projectSelect = $('#project-select');
    const $fixedCompany = $('#fixed-company-area');
    const $companySelectArea = $('#company-select-area');
    const $companySelect = $('#company-select');

    // 监听项目选择变化
    $projectSelect.on('change', function() {
        const selectedProject = $(this).val();

        // 先隐藏所有公司相关区域
        $fixedCompany.hide();
        $companySelectArea.hide();

        if (selectedProject === 'ASAS') {
            // 显示固定文本框
            $fixedCompany.show();
        } else {
            // 显示公司选择框并生成选项
            $companySelectArea.show();
            $companySelect.empty(); // 清空原有选项

            // 从映射中取出对应公司列表，生成下拉选项
            const matchedCompanies = projectCompanyMap[selectedProject];
            if (matchedCompanies && matchedCompanies.length > 0) {
                matchedCompanies.forEach(company => {
                    $companySelect.append(`<option value="${company.name}">${company.name}</option>`);
                });
            }
        }
    });

    // 页面加载时触发一次选择事件，处理默认选中项
    $projectSelect.trigger('change');
});

方案二：后端API动态获取（适合数据量大/需实时更新的场景） #

如果公司数据量较大，或者需要实时从数据库获取最新数据，可以通过后端接口动态查询。

1. 后端新增API接口

新增一个接口接收项目名称，返回对应的公司列表：

from flask import jsonify, request

@app.route('/api/get-companies')
def get_companies_by_project():
    project_name = request.args.get('project_name')
    if not project_name:
        return jsonify([])
    
    # 根据项目名称筛选公司（这里替换为你的数据库查询逻辑）
    matched_companies = [
        {"name": comp.name, "id": comp.id} 
        for comp in companies 
        if comp.destinationindicator == project_name
    ]
    return jsonify(matched_companies)

2. 前端JQuery调用接口调整

修改联动逻辑，通过AJAX请求后端接口获取数据：

$(document).ready(function() {
    const $projectSelect = $('#project-select');
    const $fixedCompany = $('#fixed-company-area');
    const $companySelectArea = $('#company-select-area');
    const $companySelect = $('#company-select');

    $projectSelect.on('change', function() {
        const selectedProject = $(this).val();

        $fixedCompany.hide();
        $companySelectArea.hide();

        if (selectedProject === 'ASAS') {
            $fixedCompany.show();
        } else {
            $companySelectArea.show();
            $companySelect.empty();

            // 调用后端API获取对应公司
            $.get('/api/get-companies', {project_name: selectedProject}, function(data) {
                if (data.length > 0) {
                    data.forEach(company => {
                        $companySelect.append(`<option value="${company.id}">${company.name}</option>`);
                    });
                }
            });
        }
    });

    $projectSelect.trigger('change');
});

关键注意点 #

• 前端本地方案响应更快，但会增加页面初始加载的数据包大小，适合数据量小的场景。
• API方案适合数据量大或需要实时更新的场景，每次请求获取最新数据。
• 使用Jinja的|tojson过滤器可以确保Python对象正确转换为JavaScript可识别的格式。

内容的提问来源于stack exchange，提问作者basicscripting