1. 程式人生 > >關於三級聯動採用獲取json檔案的json資料的做法

關於三級聯動採用獲取json檔案的json資料的做法

呼叫方式
/**
* 載入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);

})