從數據庫中獲取信息顯示在select下拉框中並實現聯動

需要解決的有以下幾個問題：

1.ajax請求數據庫中的數據

2.將數組信息顯示在select下拉框的option中，用 $.each(data, function(index, item) {}}）遍歷數組data

 

3.onchange事件與on()函數綁定change事件委托

 

一、ajax請求數據庫中的數據實現聯動

一般要select的聯動效果都可參考省市區的三級聯動。參考鏈接：https://c.runoob.com/codedemo/3490

但是我今天做的樓棟，單元，樓層、房間號 之間的聯動要從數據庫獲取。因為四者之間的關系非常復雜，所以為了使前端頁面的實現更加簡潔，思路更清晰，在后台就數據庫中，將數據就進行了處理，並向前端提供了四個接口。

①根據社區id獲取樓棟信息

②根據社區id、樓棟（改變） 獲取單元號

③根據社區id、樓棟、單元（改變）獲取樓層

④根據社區id、樓棟、單元、樓層（改變）改變獲房間號

 

 

 

1.創建ajax請求數據庫中的數據

function ajaxRequest(params, ipPort, url, callback) {
                var mData = params;
                mData = JSON.stringify(mData);
                $.ajax({
                    type: "post",
                    url: ipPort + url,
                    async: true,
                    dataType: "json",
                    contentType: "application/json",
                    data: mData,
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function(result) {
                        callback(result);
                    },
                    error: function(error) {
                        alert("請求出錯");
                    }
                });
            }

2.將從數據庫中獲取到的數組進行遍歷顯示與select下拉列表中

html：

　　　　　　　　樓棟：<select id="buildingSelect">
                    <option value=''>-請選擇樓棟-</option>
                </select>

js：

//根據社區id獲取樓棟信息 function searchBuilding() { var mData = { "communityId": "0002" }; var ipPort = "http://127.0.0.1:8080/dsjh/"; var mUrl = "dcs/c45b330bc62144779be0859e99965c8a/select"; ajaxRequest(mData, ipPort, mUrl, function(result) { // console.log(result); //請求結果處理 if (result.code == 200) { //請求成功 var data = result.data; console.log(data);
　　　　　　　　　　　　　　//each遍歷處理data $.each(data, function(i, item) { if (item == null) { return; } $("<option></option>") .val(item["building_id"])//選項的value值 .text(item["building_name"]//選項的text值) .appendTo($("#buildingSelect")); }); } }); }

3.獲取選中項的value值 並添加onchange事件。

html：

　　　　　　　樓棟：<select class="buildingSelect" onChange="selectChange(this.value)">
                <option> -請選擇- </option>
            </select>

若出現onchange 事件 is not defined錯誤 ，有this，改成事件委托寫法

　　原因：函數作用域問題。應該將函數，移到事件處理程序之外。

原來寫法：

html:

js:

 

改成 :

html:

js:

this,event 獲取當前選中的值

 

 onchange是為當前已存在的元素添加的事件
on是通過事件委托的方式，為目前存在的以及未來可能存在的指定元素，添加的事件