AJAX異步請求二級聯動加載下拉框

最近在開發中用到的二級聯動加載下拉框，感受比較有意思，記錄一下。

• 首先，二級聯動下拉框的數據庫建模是至少兩張表以上的外鍵關聯查詢，首先準備數據庫表格

        

• 數據庫表以及數據準備好事後，開始開發前端頁面（前提是整個項目環境搭建好的狀況下，此項目使用IDEA開發）

咱們的需求是經過選擇第一個下拉框的時候，第二個下拉框自動加載屬於第一個下拉框的集合，

因此，這個時候怎麼才能加載呢？無非是根據第一個下拉框的某個屬性值去查詢第二張表的屬性集合

這個時候思路就出來了，首先頁面加載的時候發送AJAX請求到後臺查詢第一個下拉框的值

前臺代碼：

$(function () {
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/product/getTypes",
                dataType:"json",
                success:function (result) {
                    for(var i=0;i<result.length;i++){
                        $("[name=ptype]").append("<option value='"+result[i].tid+"'>"+result[i].tname+"</option>")
                    }
                }
            })
        })

後臺代碼：

此時第一個下拉框已經準備好了，到了最關鍵的一步，根據第一個選中的下拉框值去數據庫查詢匹配的數據集合（這裏是綁定select標籤onchange事件的方式）

function getProducts() {
            var id=$("[name=ptype]").val();
            $("[name=pid]").empty();
            $("[name=pid]").append("<option >請選擇</option>")
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/product/getMappingProducts",
                data:{"id":id},
                dataType:"json",
                success:function (result) {
                    for(var i=0;i<result.length;i++){
                        $("[name=pid]").append("<option value='"+result[i].pid+"'>"+result[i].ptitle+"</option>")
                    }
                }
            })
        }

爲何咱們能獲取到第一個下拉框的id呢？

這裏有一個巧妙的思想，在加載第一個下拉框的時候，在每一個option標籤中隱藏一個value屬性（把id藏進去），那麼經過標籤.val函數就能獲取到value屬性值了

到這裏其實已經完成了大部分工做，下面就是根據請求參數查詢回顯數據了

後臺代碼：

到這一步功能已經實現！

只要掌握了二級聯動下拉框加載，三級四級同理也能夠類似方式實現！