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. Kali Linux 2.0配置并安装常用的工具

    Kali Linux 前身是著名渗透测试系统BackTrack ,是一个基于 Debian 的 Linux 发行版,包含很多安全和取证方面的相关工具. Kali Linux 2.0是基于Debian ...

  2. 【我是老中医】Win10系统下MATLAB无法正常打开的解决方案

    转眼大四了,要开始做毕设了,导师给的题目要用到他之前做的东西,都是MATLAB做的,所以不太熟悉MATLAB的我也得用这玩意儿了,想想自己目前也就大二的DSS实验和大三的AI实验用过MATLAB,当时 ...

  3. jsp中查询条件的回显

    后台框架为ssh,前台纯手写无框架是最老的写法,因为是接手别人的项目无法改变框架原型,只能基于修改. 进入正题: 我这里查询条件有两种input的text(文本框)和select(下拉框). 1.te ...

  4. 定义信息源的一些示例（xml文件）

    本文目录 1.订阅博客,简单一例 2.从网页获取信息,简单一例 3.充分使用callback回调代码 4.html_re中包含多个block 5.使用html_json这个worker,解析json数 ...

  5. Google Dapper-大规模分布式系统的基础跟踪设施

    [说明:本文是阅读Google论文"Dapper, a Large-Scale Distributed Systems Tracing Infrastructure"之后的一个简要 ...

  6. Keepalived+Nginx架构整理版

    Keepalived介绍 keepalived是一个类似于layer3, 4, 5 交换机制的软件,也就是我们平时说的第3层.第4层和第5层交换.Keepalived的作用是检测web服务器的状态,如 ...

  7. Intellij IDEA +MAVEN+Jetty实现Spring整合Mybatis

    1 pom.xml(这里出现transaction错误,是版本的问题) <project xmlns="http://maven.apache.org/POM/4.0.0" ...

  8. Displaying Bitmaps Efficiently 显示图片相关

    http://developer.android.com/training/displaying-bitmaps/index.html .手机内存资源有限 .Bitmap占用的内存大 .App有时需要 ...

  9. php入门part3

    php函数 php函数和JScript的函数大同小异,这里主要强调一下不同之处. 函数的定义:function函数名(形参类表){ 函数体 } 函数的调用:函数名(实参类表) 在php里函数可以先调用 ...

  10. Objective-C的 KVC和KVO

    字面意思分别是: KVC是指key value coding,键值编码. KVO是指key value observing,键值观察. 直白的说法是: KVC就是将一个对象的属性及其值当做一个字典,可 ...