關於三級聯動採用獲取json檔案的json資料的做法
阿新 • • 發佈:2018-11-10
呼叫方式
/**
* 載入address.js
* @returns
*/
layui.config({
base : base+”/rs/control/layuicms2.0-master/js/” //如果a資料夾中直接就是xx.js檔案,則為“../js/”
}).extend({
“address” : “address”
})
/**
* 獲取三級聯動資料
* @returns
*/
layui.use(‘address’, function(){
console.log(“hello”)
var address = layui.address;
/*載入省市三級聯動*/ var url = base+"/rs/control/layuicms2.0-master/json/goods.json"//省市縣三級聯動json陣列 address.provinces(url,0,0,0);
});
addres.js檔案
layui.define([“form”,”jquery”],function(exports){
var form = layui.form,
$ = layui.jquery,
Address = {
//url 為資料的json檔案的路徑 //province,city,area為上次儲存的select的value 這邊是code provinces : function(url,province,city,area) { //載入省資料 var proHtml = '',that = this; //呼叫json資料 $.get(url, function (data) { for (var i = 0; i < data.length; i++) { if(data[i].code==province){ proHtml += '<option selected="selected" sort="'+i+'" value="' + data[i].code + '">' + data[i].name + '</option>' //載入之前記錄的市級資料 that.citys(data[i].childs,city,area); }else{ proHtml += '<option sort="'+i+'" value="' + data[i].code + '">' + data[i].name + '</option>'; } } //初始化省資料 $("select[name=province]").append(proHtml); form.render(); //監聽省級的點選事件 $("#province").change(function(){ var id = $("#province").find("option:selected").attr("sort") $("#province1").val($(this).children('option:selected').text()) that.citys(data[id].childs,0,0); that.areas(0,0); }) }) }, //載入市資料 citys : function(citys,city,area) { var cityHtml = '<option value="">二級類目</option>',that = this; for (var i = 0; i < citys.length; i++) { if(citys[i].code==city){ cityHtml += '<option selected="selected" sort="'+i+'" value="' + citys[i].code + '">' + citys[i].name + '</option>'; that.areas(citys[i].childs,area); }else{ cityHtml += '<option sort="'+i+'" value="' + citys[i].code + '">' + citys[i].name + '</option>'; } } $("select[name=city]").html(cityHtml).removeAttr("disabled"); form.render(); $("#city").change(function(){ var id = $("#city").find("option:selected").attr("sort") $("#city1").val($(this).children('option:selected').text()) that.areas(citys[id].childs,0); }) }, //載入縣/區資料 areas : function(areas,area) { var areaHtml = '<option value="">三級類目</option>'; for (var i = 0; i < areas.length; i++) { if(areas[i].code==area){ areaHtml += '<option sort="'+i+'" selected="selected" value="' + areas[i].code + '">' + areas[i].name + '</option>'; }else{ areaHtml += '<option sort="'+i+'" value="' + areas[i].code + '">' + areas[i].name + '</option>'; } } $("select[name=area]").html(areaHtml).removeAttr("disabled"); form.render(); $("#area").change(function(){ var id = $("#area").find("option:selected").attr("sort") $("#area1").val($(this).children('option:selected').text())
// alert($(this).children(‘option:selected’).val());
})
}
};
exports("address",Address);
})