JQuery實現省市聯動 address-picker

address-picker

一個jquery地址選擇器，使用很簡單。 A jQuery plugin for picking districts of China,css and js files are only 8KB,just try it.

將dist文件夾下的三個文件夾放進項目（注意不要改變css或js文件的相對位置）

 

在html中引入js文件

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>  

   <script src="js/address-picker.js" type="text/javascript"></script> 

 

 

想讓彈出地址面板展示在哪個頁面元素下，就傳入該元素的id，可以是任意元素(比如div/span/button...之類的)

下方以一個span舉例:

    <span id="address_picker_text">選擇地址</span> 

 

精簡方式

  

 var addressPicker1 = new addressPicker("address_picker_text");//默認展示三級聯動

 

自定義參數方式

 var addressPicker1 = new addressPicker({
        id:"address_picker_text",                     //想要展示在哪個頁面元素下
        level:3,                                      //設置幾級聯動，默認3，可支持1-5
        levelDesc:["省份","城市","區縣","鄉鎮","社區"], //每級聯動標題展示文字,默認如左顯示
        index:"996",                                  //浮動面板的z-index，默認`996`
        separator:" / ",                              //選擇后返回的文字值分隔符，例如`四川省 / 成都市 / 武侯區`,默認` / `
        isInitClick:true,                             //是否為元素id自動綁定點擊事件,默認`true`
        isWithMouse:false,                            //浮動面板是否跟隨鼠標點擊時坐標展示(而不是根據元素id的坐標).默認`false`
        offsetX:0,                                    //浮動面板x坐標偏移量，默認`0`
        offsetY:0,                                    //浮動面板y坐標偏移量,默認`0`
        emptyText:"暫無數據",                          //數據為空時展示文字,默認'暫無數據'
        color:"#56b4f8",                              //主題顏色，默認#56b4f8
        fontSize:'14px',                              //字體大小，默認14px
        isAsync:false,                                //是否異步加載數據，默認false，如果設置true的話asyncUrl必傳
        asyncUrl:"",                                  //異步加載url，data數據將無效
        btnConfig:[],                                 //面板下方展示的自定義按鈕組，格式見后面說明。默認不傳
        data:""                                       //┌──未指定isAsync的時候以data為准，一次性加載所有數據
                                                      //├──可不傳,默認使用`data`文件夾下的三級數據json文件
    });                                               //└──支持傳入json文件路徑(數據類型為string)或是數據本身(數據類型為object)

 

事件方法

show()顯示面板
hide()隱藏面板
refreshData(data) 重新載入地址data
on(type,function) 綁定地址選擇面板事件
getCurrentObject() 獲取當前點擊節點數據
getTotalValueAsText() 獲取所有選擇節點的文本字符串
getTotalValueAsArray() 獲取所有選擇節點的數組結構
clearSelectedData() 清除所有選中值
setSelectedData(arr) 設置選中值
下方是一些代碼示例:
addressPicker1.show();  //顯示面板
addressPicker1.hide();  //隱藏面板
addressPicker1.on("click", function () {
    //業務邏輯do whaterver you want ...
    console.log(addressPicker1.getCurrentObject());    //{code: 1101, text: "市轄區", level: 2}
    console.log(addressPicker1.getTotalValueAsText()); //北京市 / 市轄區
    console.log(addressPicker1.getTotalValueAsArray());//{code:['11','1101'],text:['北京市','市轄區']}
    $('#address_picker_text').text(addressPicker1.getTotalValueAsText());
});

//重新載入地址data
var new_data = [{name:'名字1',code:'110',children:[{name:'名字1的兒子',code:'1101'}]},
    {name:'名字2',code:'111'}];
address_picker.refreshData(new_data);
address_picker.show();

//設置選中值
address_picker.setSelectedData([11,1101,110105]);//注意此處要傳完整路徑
$("#address_picker_text").text(address_picker.getTotalValueAsText());

//清除所有選中
address_picker.clearSelectedData();
$("#address_picker_text").text("選擇地區");

 https://github.com/huchuanfu/address-picker

下載

https://files.cnblogs.com/files/mqingqing123/address-picker-master.zip