django:下拉框二级联动实现

时间:2019-10-28
本文章向大家介绍django:下拉框二级联动实现,主要包括django:下拉框二级联动实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

注意:只列举核心部分代码

前台模板:

<div class="col-sm-4">
  <select data-placeholder="选择基础表." class="form-control" name="project_id" id="db_table" required="required">
  // 这里放置回调函数渲染的内容
  </select>
</div>

对应js:

<script>
        $("#db_link").change(function() {
            var options=$("#db_link option:selected"); //获取选中的项
            var db_link_id = options.val(); //获取选中的值
            {#alert("ok");#}
            alert(db_link_id);

            // 选择id=db_link的元素时触发该ajax请求,调用/comparison/get_table接口
            $.ajax({
                url: '/comparison/get_table',
                data: {"db_link_id": db_link_id},
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    var content='';
                    {#alert(123456);#}
                    $.each(data, function(i, item){
                        // 调用接口后返回list数据[u'account_role', u'account_user'],循环遍历该list拼接选项的内容
                        content+='<option value='+item+'>'+item+'</option>'
                    });
                    // 将拼接好的内容作为id=db_table这个select元素的内容
                    $('#db_table').html(content)
        },
            })

        })
    </script>

原文地址:https://www.cnblogs.com/gcgc/p/11751935.html