js代码

/*城市三级联动

* @method cityChange

* @param allProvince,allCity,allDistrict

*/

function cityChange(provinceN,cityN,districtN){

    var all_province="";

    for(var i=0;i<allCity.province.length;i++){

            all_province+='<option name="province" value='+allCity.province[i].id+'><span class="province">'+allCity.province[i].name+'</span></option>';  };

    $('#'+provinceN).append(all_province);

    $('#'+provinceN).change(function () {

                var provinceId = $('#'+provinceN).val();

                $('#'+cityN).find("option:gt(0)").remove();

                 $('#'+districtN).find("option:gt(0)").remove();

               var all_city="";

               if( provinceId!=99999){

               for(var j=0;j<allCity.city[provinceId].length;j++){

                         all_city += '<option name="city" value='+allCity.city[provinceId][j].id+'><span class="city">'+allCity.city[provinceId][j].name+'</span></option>';

                    } } ;

                    $('#'+cityN).append(all_city);

            });

    $('#'+cityN).change(function () {

                var cityId = $(this).val();

                var all_district="";

               for(var k=0;k<allCity.district[cityId].length;k++){

                         all_district += '<option name="district" value='+allCity.district[cityId][k].id+'><span class="city">'+allCity.district[cityId][k].name+'</span></option>';

                    }  ;

                    $('#'+districtN).append(all_district);

            });

}

HTML代码

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>城市三级联动</title>

</head>

<body>

	<label>三级联动</label>

	<div>

        <select  id="allProvince">

            <option value="">请选择省份</option>

        </select>

        <select  id="allCity" >

            <option value="">请选择城市</option>

        </select>

        <select  id="allDistrict">

            <option value="">请选择区县</option>

        </select>

	</div>

<script src="http://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>

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

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

<script>

	$(function(){cityChange('allProvince','allCity','allDistrict');})

</script>

</body>

</html>

源码下载地址==》下载

jquery 城市三级联动的更多相关文章

  1. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  2. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  3. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  4. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  5. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  6. 城市三级联动 AJAX-原生js封装

    话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...

  7. jQuery实现三级联动菜单（鼠标悬停联动）

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...

  8. jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

    很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...

  9. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

随机推荐

  1. strlen(); strcpy(); strcat(); strcmp() ---笔记

    指针小知识点: int a =10; int *p=&a; int *q=p;        //p中保存的是a的地址 int *q=p;       //将p的值赋给q 作用是让q也指向a ...

  2. 学韩顺平老师linux教程--笔记

    第二讲:1.startx  进入图形界面2.shutdown -h now 立刻进行关机3.shutdown -r now 现在重新启动计算机4.reboot          现在重新启动计算机5. ...

  3. OkHttp和Volley对比

    OkHttp 物理质量 使用OkHttp需要 okio.jar (80k), okhttp.jar(330k)这2个jar包,总大小差不多400k,加上自己的封装,差不多得410k. 功能介绍 Squ ...

  4. 如何用java写出无副作用的代码

    搞java的同学们可能对无副作用这个概念比较陌生,这是函数式编程中的一个概念,无副作用的意思就是: 一个函数(java里是方法)的多次调用中,只要输入参数的值相同,输出结果的值也必然相同,并且在这个函 ...

  5. 第一个Struts2程序之HelloWorld

    1.Struts2 简介 Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架.其全新的Struts 2的体系结构与St ...

  6. urllib+BeautifulSoup无登录模式爬取豆瓣电影Top250

    对于简单的爬虫任务,尤其对于初学者,urllib+BeautifulSoup足以满足大部分的任务. 1.urllib是Python3自带的库,不需要安装,但是BeautifulSoup却是需要安装的. ...

  7. 【原创】关于不同分支代码的Merge有了透彻的理解

    多分支开发,Merge是一个绕不过的话题,不管是Git还是SVN,公司用的是SVN,之前对于SVN的Merge没有很好的研究,出了些状况,这个问题不解决,顺畅地进行多分支开发就是海市蜃楼,下定决心把这 ...

  8. 首页使用page类完成生成页面内容的大部分工作

    fs2在处理异常及资源使用安全方面也有比较大的改善.fs2 Stream可以有几种方式自行引发异常:直接以函数式方式用fail来引发异常.在纯代码里隐式引发异常或者在运算中引发异常,最开始只是我自己浏 ...

  9. shiro 自动登录

    1.出现的错误:did not match the expected credentials---密码不匹配,后来自己写密码验证,其实作用不大: 配置 <!-- Shiro权限过滤过滤器定义 - ...

  10. net reactor加密源码保软件安全-net reactor使用教程

    上一次介绍用 Xenocode Postbuild for .NET 混淆加密源代码确保软件安全,本篇将讨论用 Eziriz .NET Reactor 混淆加密软件源代码,为从未用过该软件加密的用户分 ...