JSON+Jquery省市区三级联动

效果图如下所示：

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--读取数据库，以json的格式输出，然后复制json数据，创建js文件-->
<script src="json/CityJson.js" type="text/javascript"></script>
<script src="json/ProJson.js" type="text/javascript"></script>
<script src="json/DistrictJson.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.each(province, function (k, p) {
var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";
$("#selProvince").append(option);
});
$("#selProvince").change(function () {
var selValue = $(this).val();
$("#selCity option:gt(0)").remove();
$.each(city, function (k, p) {
if (p.ProID == selValue) {
var option = "<option value='" + p.CityID + "'>" + p.CityName + "</option>";
$("#selCity").append(option);
}
});
});
$("#selCity").change(function () {
var selValue = $(this).val();
$("#selDistrict option:gt(0)").remove();
$.each(District, function (k, p) {
if (p.CityID == selValue) {
var option = "<option value='" + p.Id + "'>" + p.DisName + "</option>";
$("#selDistrict").append(option);
}
});
});
});
</script>
</head>
<body>
<select id="selProvince">
<option value="0">--请选择省份--</option>
</select>
<select id="selCity">
<option value="0">--请选择城市--</option>
<option>aaaa</option>
<option>aaaa</option>
</select>
<select id="selDistrict">
<option value="0">--请选择区/县--</option>
</select>
<input type="button" id="btnOK" value="确定" />
</body>
</html>

本段代码比较简单，实用性也非常高，希望本文所述对大家有所帮助。

赞 (0)

相关推荐

  • js实现一个省市区三级联动选择框代码分享

    js实现一个省市区三级联动选择框代码分享

    运行效果:  ================================================= 部分代码: ================================================= 当然首先你数据库中要有这个table,不然你没有数据.....^_^ 复制代码 代码如下: <tr> <td class="tr pr10 "> 所在地: </td> <td class="tl">

  • javascript实现简单的省市区三级联动

    javascript实现简单的省市区三级联动

    当我们注册一个网站,会看到省市区三级联动,下面简单介绍一下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="&

  • 从QQ网站中提取的纯JS省市区三级联动菜单

    从QQ网站中提取的纯JS省市区三级联动菜单

    我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下:  何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js 使用方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 直接使用QQ的省市区数据

  • PHP+Mysql+Ajax+JS实现省市区三级联动

    PHP+Mysql+Ajax+JS实现省市区三级联动

    基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh

  • js省市区级联查询（插件版&无插件版）

    js省市区级联查询（插件版&无插件版）

    实现方式千差万别,满足自己需求的才是最好的. 插件版提供了两种方式: distpicker版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="css/city.css" rel="external nofollow" rel="external nofollow" rel="styl

  • 省市区三级联动下拉框菜单javascript版

    实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat

  • JS实多级联动下拉菜单类，简单实现省市区联动菜单！

    作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.

  • javascript实现省市区三级联动下拉框菜单

    javascript实现省市区三级联动下拉框菜单

    本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/

  • JavaScript省市区三级联动菜单效果

    本文实例为大家分享了三级联动省市区js完整代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var c

  • javascript省市区三级联动下拉框菜单实例演示

    javascript省市区三级联动下拉框菜单实例演示

    本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

随机推荐