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>