Django实现template中两个下拉框联动

先概括总结

1. 数据库中先配置好2个表的关联
2. 第一个下拉框里的值是从数据库中取来的
3. 第二个下拉框里的值是需要写一个写接口，做数据库的关联查询，查出第二个的值返回一个json
4. 当第一个下拉框的值被改变，去发送一个ajax请求，请求刚才写好的接口，把第一个下拉框的值传进去，把ajax返回的结果，拼成下拉框的选项html

这就完成了，把代码贴下

template

<tr>
            <td><label>选择环境:</label></td>
            <td><select name="order_server" id="order_server">
                <option value="choice">请选择环境</option>
                {% for env in env_list %}
                    <option value={{ env.env_id }}>{{ env.env_name }}</option>
                {% endfor %}
            </select></td>
        </tr>
        <tr>
            <td><label>操作人员:</label></td>
            <td><select name="operator" id="id_operator">
                <script type="text/javascript" src="{% static 'js/get_monitor_operator_by_env_name.js' %}"></script>
            </select></td>
        </tr>

static/js

$('#order_server').change(function () {
    var env_id = $(this).val()
    $.ajax({
        url: '../get_monitor_operator_info/',
        type: 'GET',
        data: {
            'env_id': env_id
        },
        dataType: "json",
        success: function (ret) {
            console.log(ret)
            var content = ''
            $.each(ret, function (i, item) {
                console.log(i)
                console.log(item)
                content += '<option value=' + item.engineer_id + '>' + item.username + '</option>'
            })
            $('#id_operator').html(content)
        }
    })
})

urls

from django.urls import path

from tom_mail_manager import views

urlpatterns = [
   
    path('get_monitor_operator_info/', views.get_monitor_operator_info, name='get_monitor_operator_info'),
]

views

def get_monitor_operator_info(request):
    if request.method == 'GET':
        env_id = request.GET.get('env_id')
        deploy = DeployInfoHelper(admin_ip, admin_port, admin_dbname, admin_dbuser, admin_dbpassword)
        json_info = deploy.get_env_name(env_id)
        return HttpResponse(json.dumps(json_info), content_type="application/json")
    return render(request, 'tommail/enterpriseMailMonitor.html')