django_jquery_ajax二级联动菜单

#注意：如果用html模板，注意block块的位置，js中jquery要放在最上。模板上不要忘记留下block块，并在block块之前引入jquery。一般会另外弄一个url专门处理ajax。

nishino123

596人浏览 · 2022-09-03 21:55:25

nishino123 · 2022-09-03 21:55:25 发布

html：
下拉框部分：

//区域
<span class= "col-xs-2">
        <label for="id_province">区域</label>

        <select class="form-control" id="id_province" name="province">
            <option selected="selected">请选择</option>
                     <option value="CE">CE</option>
                     <option value="CN">CN</option>
                     <option value="CS">CS</option>
                     <option value="EA">EA</option>
                     <option value="SW">SW</option>
                     <option value="SR">SR</option>
                     <option value="NR">NR</option>
                     <option value="NW">NW</option>
        </select>
    </span>
    
    //分公司，只留一个请选择，其他的不写
    <span class= "col-xs-2">
        <label for="id_city">分公司</label>

        <select class="form-control" id="id_ctiy" name="city">
            <option selected="selected">请选择</option>

        </select>
            
    </span>

ajax
##注意：如果用html模板，注意block块的位置，js中jquery要放在最上。模板上不要忘记留下block块，并在block块之前引入jquery

    <script type="text/javascript" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'plugins/echarts.min.js' %}"></script>


    {% block js%} 
    {% endblock%}
</body>

$('#id_province').change(function(){
    
            var prov_id = $('#id_province').val();        #获取区域下拉框的值
            
            $.ajax({
                type: "GET",                #定义方式
                dataType: 'json',            
                url:"/data/",						#定义路由
                data:{'prov_id':prov_id},                 #区域的值放在字典中
                success:function(res){                       #res是后端传来得值，res={br:[....]}

                    var content='';                   
                    data = res.br                                                 #获取key是br的value，即分公司list
                    $.each(data, function(key, value){                            #注意，这里的list是一个arry，遍历有2个，前者是数字序号，后者是list的值。

                        content += '<option>'+value+'</option>'        #拼装出option的html语句
                        
                        });
                    $('#id_ctiy').html(content)                 #填充到指定id

                               
                }
            });

        });

</script>

url：
一般会另外弄一个url专门处理ajax

path('data/', views.rg_br),                  #绑定路由

views

def rg_br(request):
    if request.method == "GET":
        rg = (request.GET.get('prov_id'))   #前往后传                  #即ajax中的data字典中的key为prov_id的value
        print(rg)
        list_model_br = list(models.Fcst.objects.filter(region = rg).values("branch").distinct())     #筛选model，取列，取distinct
        li_br = []                                                        #转成list
        for i in list_model_br:
            li_br.append(i['branch'])



        dd = {"br":li_br}    									 #传给前端的是br:[]
    return JsonResponse(dd,safe=False)