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. python之环境搭建windows版

    1.先到python官网下载属于自己的的python版本,有linux版,有mac版,有windows版:https://www.python.org/downloads/windows/ 2.下载完 ...

  2. cpp项目的组织

    编译篇 较大型cpp项目的代码组织.编译都是深耦合的. 一般提供一个总体的makefile,进入各个模块,又有自己的makefile,这些makefile又都依赖于一些被include的文件的的定义, ...

  3. React组件性能优化

    转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...

  4. grunt压缩js文件

    grunt是node中很好的管理项目的工具,利用它可以实现对整个项目的管理,避免很多重复性的工作如合并.压缩,检查语法等. 使用grunt首先要安装node环境,nodejs官网http://node ...

  5. .Net Office开源组件

    1.NPOI NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目.使用 NPOI 你就可以在没有安装 Office 或者相应环 ...

  6. InfoPi简介、试用链接、资料索引

    InfoPi的定位是“个人信息收集服务器”. 用户可以灵活地定义信息的来源,比如从网页抓取感兴趣的信息.订阅博客.从温度传感器读取数据,等等. 然后,把收集到的信息用web的方式展示出来. 可以把In ...

  7. linux下的代码比较工具

    在linux下有很多不错的代码比较工具:meld.DiffMerge.xxdiff.diffuse.Kompare等... diff : 文件比较工具用于比较计算机上的文件的内容,找到他们之间相同与不 ...

  8. requests高级用法

    会话对象 当你向同一主机发送多个请求时,session会重用底层的tcp连接,从而提升性能,同时session也会为所有请求保持 cookie. # _*_ coding: utf-8 _*_ imp ...

  9. SQL Server常用的性能诊断语句

    /* 常规服务器动态管理对象包括: dm_db_*:数据库和数据库对象 dm_exec_*:执行用户代码和关联的连接 dm_os_*:内存.锁定和时间安排 dm_tran_*:事务和隔离 dm_io_ ...

  10. 免费提供UG、ProE二次开发、定制化开发服务

    免费提供UG.ProE二次开发,定制开发服务. 拥有六年UG.ProE二次开发经验,相关项目经验. 从事过智能设计.计算机图形学相关研究. 联系方式: QQ:1787326383 微信号:begtos ...