JQuery realize provinces linkage address-picker

address-picker

A jquery address selector, very simple to use. A jQuery plugin for picking districts of China, css and js files are only 8KB, just try it.

The three files dist folder under the folder into the project (be careful not to change the relative position of css or js file)

 

Introduced js file in html

    <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> 

 

 

I want to show pop-up panel address at which page elements, we passed id of the element can be any elements (such as div / span / button ... and the like)

In a span of example below:

    <Span id = "address_picker_text"> select address </ span> 

 

Streamline the way

  

 var addressPicker1 = new addressPicker ( "address_picker_text"); // default display three linkage

 

Custom parametrically

addressPicker1 new new addressPicker = var ({ 
        the above mentioned id: "address_picker_text", // you want to show in which a page element 
        level: 3, // set up a few levels linkage, default 3, can support 1-5 
        levelDesc: [ "provinces", " city "," county "," township "," community "] // every level interaction title to display text, the default display as left 
        index:" 996 ", // floating panel of z-index, the default 996`` 
        Separator : "/", // return the selected text value separator, such as `Sichuan / Chengdu / Wuhou` default `/` 
        isInitClick: to true, // whether to automatically bind the click event for the element id, default true` ` 
        isWithMouse: false, // floating panel whether to follow the mouse is clicked coordinate display (instead of according to the coordinates of the elements id) false` default '. 
        offsetX: 0, // x-coordinate offset floating panel, default` 0`
        offsetY: 0, // floating panel y coordinate offsets, default 0` ` 
        emptyText:" No Data ", // display text data is empty, the default 'No data' 
        Color:" # 56b4f8 ", // theme color, default 56b4f8 # 
        fontSize: '14px', // font size, default 14px 
        isAsync: false, // whether asynchronous load data, default false, if set true, then asyncUrl will pass 
        asyncUrl: "", // asynchronous loading url , data invalid data 
        btnConfig: [], shown below // custom button panel set, formatted as will be described later. The default does not pass 
        data: "" // ┌── unspecified isAsync time to data subject, one-time load all the data 
                                                      // ├── not pass,
    }); // └── support incoming json file path (data type string) or the data itself (the data type object)

 

Event Method

show () display panel 
hide () Hide Panel 
refreshData (data) to reload address the Data 
ON (of the type, function) bind address selection panel event 
getCurrentObject () Gets the current click data node 
getTotalValueAsText () Gets all the nodes selected text strings 
getTotalValueAsArray () Gets an array structure of all selected nodes 
clearSelectedData () clear all the selected values 
setSelectedData (arr) set value is selected 
below are some code examples: 
addressPicker1.show (); // display panel 
addressPicker1.hide (); // hides panel 
addressPicker1.on ( "the Click", function () { 
    // business logic whaterver you want ... do 
    console.log (addressPicker1.getCurrentObject ()); // {code: 1101, text: "City area", level: } 2 
    console.log (addressPicker1.getTotalValueAsText ()); // Beijing / municipal districts
    console.log (addressPicker1.getTotalValueAsArray ()); // {code: [ '11', '1101'], text: [ ' Beijing', 'city area']} 
    $ ( '# address_picker_text') text (. addressPicker1.getTotalValueAsText ()); 
});
 
// reload address data
var new_data = [{name: 'name 1', code: '110' , children: [{name: ' name son 1', code: '1101'}]}, 
    {name: 'name 2', code: '111'}]; 
address_picker.refreshData (new_data); 
address_picker.show (); 

// set the selected value 
address_picker.setSelectedData ([11,1101,110105]); // Note that here the full path to pass 
$ ( "# address_picker_text ") text (address_picker.getTotalValueAsText ());. 

// clear all the selected 
address_picker.clearSelectedData (); 
$ (" # address_picker_text select Region ")") text (. " ;

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

download

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