Pure js Mobile Terminal City selection plug-in, js mobile city plug-in

Pure js Mobile Terminal City selection plug-in, js mobile city plug-in

Next, I used to select a plug-in for the js mobile end date. Today, my colleagues are asking how to implement the linkage between provinces, cities, and counties on the Mobile End ~ All of them are based on jquery and zepto. What's more hateful is that most of them are in the PC version. There are three select tags !!! This experience on the mobile terminal is too low. I think I must do it myself with my temper. Just before I made a date selection, let's just make another one by yourself, first:

Usage

Add the input tag to the html page as follows:

<Input id = "demo1" type = "text" readonly = "" name = "input_area" placeholder = "city selection special effect"/>

Introduce the style file to the page:

<link rel="stylesheet" href="css/common/lArea.css">

Introduce js files to the page at the same time:

<script src="lArea.js"></script>

Initialize the plug-in:

Var area = new lArea (); area. init ({'trigger': '# demo1', // Control ID 'data': lAreaData // data source in array format, which can be extended to custom data source });

LAreaData is an array of city data sources organized by myself. It is defined at the bottom of the js plug-in script. The data source format is:

1 var lAreaData = [{2 "id": "2", 3 "name": "Level 1", 4 "child": [{5 "id": "21 ", 6 "name": "Level 2 1", 7 "child": [{8 "id": "211", 9 "name": "Level 3 1" 10 }, {11 "id": "212", 12 "name": "Level 3 2" 13 },{ 14 "id": "213", 15 "name ": "Level 3" 16}] 17 },{ 18 "id": "22", 19 "name": "Level 2" 20 },{ 21 "id ": "23", 22 "name": "Level 2 3" 23}] 24}];

I want you to understand the structure at a glance, so you can flexibly customize the need to generate a linked data source according to your own needs.

This js-only mobile-end city selection plug-in is small in size and the lAreaData variable size is less than 5kb. It is suitable for implementing provincial/municipal/county linkage in mobile terminals, in fact, this plug-in is more important than the date selection plug-in the previous article, because the date plug-in has native on the mobile end, while the city selection plug-in on the mobile end is not native, in addition, such requirements in projects are frequently used.

Lele is better than zlele. If you don't have any mobile-end cities to select plug-ins, you can take this with me first!

 

 

Project address: https://github.com/xfhxbb/lArea