China provincial and municipal District address three-level linkage jquery Plugin case download

China provincial and municipal District address three-level linkage jquery Plugin case download

Distpicker is a can achieve the Chinese provincial and municipal District address three-level linkage jquery plug-in. It uses simple, simple setup can complete the Chinese provinces and cities address linkage effect.

Installation

The three-level plug-in can be installed via NPM or bower.

NPM Install Distpickerbower Install Distpicker

Using the method HTML structure

The basic HTML structure is to use a <div> container to wrap a set of <select> elements.

<Div><!--Container -  <Select></Select><!--Province -  <Select></Select><!--City -  <Select></Select><!--Area -</Div>

You can go straight through data-toggle="distpicker"Implementation to initialize.

<DivData-toggle= "Distpicker" ><!--Container -  <Select></Select><!--Province -  <Select></Select><!--City -  <Select></Select><!--Area -</Div>

The placeholder text can also be displayed.

<DivData-toggle= "Distpicker">    <Selectdata-province= "----Select province----"></Select>    <Selectdata-city= "----Select City----"></Select>    <Selectdata-district= "----Select area----"></Select></Div> 

Or customize the provinces and cities area.

<DivData-toggle= "Distpicker">    <Selectdata-province= "Zhejiang province"></Select>    <Selectdata-city= "Hangzhou City"></Select>    <Selectdata-district= "West L. District"></Select></Div>

Initializing plug-ins

After the page DOM element has been loaded, distpicker() the address linkage plug-in can be initialized by means of the method.

$ (' #target '). Distpicker ();

Custom placeholder text:

$ (' #target '). Distpicker ({    '----province----',    '----City----',    '----area----' });

Customize the provinces and cities area.

$ (' #target '). Distpicker ({    ' Zhejiang province ',    ' Hangzhou city ',    ' West L. District ');

Configuration parameters

You can modify $().distpicker(options) the default configuration parameters by modifying the $.fn.distpicker.setDefaults(options) global default parameters.

• autoSelect: Type: Boolean, default: True. Whether the city and district are automatically selected when the province changes.
• placeholder: Type: Boolean, default: True. Whether to display placeholder text.
• province: Type: String, Default:--Save ——。 Defines the initial value of the province. If the province is present in the Distpicker.data.js file, it is selected, otherwise the placeholder text is displayed.
• city: Type: String, default value:--City ——。 Defines the initial value of the city. If the city exists in the Distpicker.data.js file, it will be selected, otherwise the placeholder text is displayed.
• district: Type: String, Default:--Zone ——。 Defines the initial value of the zone. If the area is present in the Distpicker.data.js file, it will be selected, otherwise the placeholder text is displayed.

Method

• reset([deep]): Resets the Select to the initial state.
  • deep (optional): Type: Boolean, default value: False. Resets select to the initial state.

  For example:

$ (). Distpicker (' reset '); $ (). Distpicker (true);

• destroy(): Destroys the plug-in instance.

Distpicker three-level address linkage plugin's github address is: Https://github.com/fengyuanchen/distpicker

China provincial and municipal District address three-level linkage jquery plugin case download