自己编写的仿京东移动端的省市联动选择JQuery插件

概述

什么是插件，插件就是即插即用叫插件，很少的配置，很少的代码就可以用都项目里，之所以做这个插件，是因为做了一个省市区的联动，其他项目如果要用怎么办，难道在ctrl+c，ctrl+v？那样做太low，做个插件吧，于是乎就开始了Jquery插件制作之旅。

 

使用效果

 

获取使用

代码开源，已经托管在git上，地址如下，希望大家赏脸给个星

https://gitee.com/jangojing/JqueryCitySelectPlug

 

1.引入js、css和移动端的meta

引入jquery版本无所谓，demo里的版本较老，就懒得换了，其次引入插件对应的js和css

加入移动端的meta是移动端开发的前提

        <script src="Scripts/jquery-1.4.1.min.js"></script>
	<script src="Scripts/CitySelect/citySelectPlug.js"></script>
	<link rel="stylesheet" href="Scripts/CitySelect/citySelectPlug.css" type="text/css" />
　　　　 <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

 

2.编辑html绑定jquery事件

html里放入一个input，用jquery绑定一个jquery事件

	<form action="submit.aspx" method="GET">
	请选择省市区:<br />
	<input type="text" name="citySelect" value="" id="citySelect" />
	<input type="submit" value="提交" />
	</form>      
        <script>
		$().ready(function () {
			$("#citySelect").citySelectPlug({ ajaxUrl: 'GetArea.ashx' });
		});
	</script>

 

3. 处理ajax请求

注意到这里有个ajaxUrl，这个是配置你项目的ajax请求的路径的。既然要做联动，肯定需要ajax请求，通过当前选择的id去找下一级的id。

ajax请求会调用对应的地址，携带id为参数，id就是用户点击的那个省的id或者市的id，根据这个id继续找下一级

这里ajax请求需要返回的结果是json格式的数据如下所示：

[{"ID":606,"Name":"市辖区"},{"ID":123,"Name":"高淳区"},{"ID":234,"Name":"鼓楼区"}]

包含id和name的数组。

 

4. 完了？　　

就这样就完了？ 是的，插件就是少量的配置，少量的代码，即插即用。

 

5. 兼容性申明

手边的设备不全，测试过的设备有iphone 6s,iphone 5s,华为P8，华为荣耀3台，一款很老的HTC，努比亚一台。

针对ios处理了输入框获得焦点自动居中的问题。

针对华为手机处理了键盘打开状态下触发屏幕可见范围高度不够导致弹出层高度只有半幅页面的问题。