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

Source: Internet
Author: User

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:


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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.