Django web开发中的二级联动select 列表的简单实现方法

因给单位行行政部门开发一个《文具管理系统》需要在管理端的入库和员工的领用端实现按文具分类查找出相应的文具，在页面上放了二个select,

第一个select 列出文具分类， 第二个select根据第一个select的分类列出相应的文具。

一， models.py

class stat_type(models.Model):
    name = models.CharField(max_length=40)
    def __str__(self):
        return self.name

class stationery(models.Model):
    name = models.CharField(max_length=40)
    spec = models.CharField(max_length=40, default='--')
    stock_num =  models.IntegerField()
    stat_type = models.ForeignKey('stat_type', to_field='id', related_name='stat_type_name', on_delete=False)
    units = models.CharField(max_length=6, default='个')

二， views.py

##get the stationery list via stat_type_id from select list
def ajax_load_stationery(request):
    if request.method == 'GET':
        stat_type_id = request.GET.get('stat_type_id', None)
        print('get stat_type_id from ajax "%s"'%(stat_type_id))
        if stat_type_id:
            data = list(stationery.objects.filter(stat_type_id=stat_type_id).values("id", "name"))
            result=json.dumps(data)
            print(result)
    return HttpResponse(result, "application/json")

三，模板

<div>

   <form method="post" action="update_pur_slave">
{% csrf_token  %}

 文具名称:    <select  name="id_stat_type" id="id_stat_type" onchange="testajax(this);">
        <option value="">-类别-</option>
        {%  for stat_type in stat_types   %}
        <option value="{{ stat_type.id }}">{{  stat_type.name  }}</option>
        {% endfor %}
                     </select>

<select  name="id_stationery" id="id_stationery">
        <option value="">-名称-</option>
        {%  for stationery in stationerys   %}
        <option value="{{ stationery.id }}">{{  stationery.name  }}</option>
        {% endfor %}
                     </select>
        数量:<input type="number" id="pur_num" name="pur_num" value="10"> <label> 个/本/支</label><input type="submit" value="添加">
    </form>

 </div>

<script language="JavaScript">

function testajax(ths){

    var id=$(ths).val();

    $.ajax({
    type: 'GET',
    url: 'ajax_load_stationery',
    dataType: 'json',
    data:{stat_type_id:id},
    success: function(ret){
    //查询成功之后填充select option
    var html = "";

    //用for循环遍历返回结果。
    for(var i=0;i<ret.length;i++){
    var iteam = ret[i];
    var id = iteam.id;

    var name = iteam.name;

    html += "<option value="+iteam.id+">"+iteam.name+"</option>";

}
$("#id_stationery").html(html);
//将新数据填充到option
}
});
}


</script>