# JqueryCitySelectPlug

**Repository Path**: jangojing/JqueryCitySelectPlug

## Basic Information

- **Project Name**: JqueryCitySelectPlug
- **Description**: 仿京东手机端省市区选择的Jquery插件，只需要引入一个js一个css，页面上加一句js绑定代码就可以使用。兼容性测试：iphone6s、iphone5s、华为荣耀、华为P9、努比亚
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2017-09-28
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JqueryCitySelectPlug
仿京东手机端省市区选择的Jquery插件，只需要引入一个js一个css，页面上加一句js绑定代码就可以使用。

使用
-----------------
1.引入jquery、citySelectPlug.js、和citySelectPlug.css
~~~
	<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" />
~~~
2. html里放入一个input，然后给他绑定jquery事件
~~~
	<script>
		$().ready(function () {
			$("#citySelect").citySelectPlug({ ajaxUrl: 'GetArea.ashx' });
		});
	</script>
~~~
3. 插件中自带ajax请求，来实现省市区的联动，需要配置ajaxUrl，且需要自行编写对应的实现，插件需要返回的是json格式的如下所示
~~~
[{"ID":606,"Name":"市辖区"},{"ID":123,"Name":"高淳区"},{"ID":234,"Name":"鼓楼区"}]
~~~

Demo效果演示
------------------------

![step1](https://gitee.com/jangojing/JqueryCitySelectPlug/raw/master/ReadmePic/1.png)
![step2](https://gitee.com/jangojing/JqueryCitySelectPlug/raw/master/ReadmePic/2.jpg)


关于demo运行
------------
demo无数据库支持，所以演示数据为模拟数据且未加逻辑判断，仅供参考。
demo为.net2.0项目，由vs2010创建。