简单的jquery实现select三级联动

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8" />

 <title>selectList</title>

 <style type="text/css">

     *{margin:0;padding:0;}

     .selectList{width:200px;margin:50px auto;}

 </style>

 <script type="text/javascript" src="jquery1.7.1.js"></script>

 </head>

 <body>

     <div class="selectList">

         <select class="province">

             <option>请选择</option>

         </select>

         <select class="city">

             <option>请选择</option>

         </select>

         <select class="district">

             <option>请选择</option>

         </select>

     </div>

     <div class="selectList">

         <select class="province">

             <option>请选择</option>

         </select>

         <select class="city">

             <option>请选择</option>

         </select>

         <select class="district">

             <option>请选择</option>

         </select>

     </div>

     <script type="text/javascript">

     $(function(){

         $(".selectList").each(function(){

             var url = "area.json";

             var areaJson;

             var temp_html;

             var oProvince = $(this).find(".province");

             var oCity = $(this).find(".city");

             var oDistrict = $(this).find(".district");

             //初始化省

             var province = function(){

                 $.each(areaJson,function(i,province){

                     temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";

                 });

                 oProvince.html(temp_html);

                 city();

             };

             //赋值市

             var city = function(){

                 temp_html = "";

                 var n = oProvince.get(0).selectedIndex;

                 $.each(areaJson[n].c,function(i,city){

                     temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";

                 });

                 oCity.html(temp_html);

                 district();

             };

             //赋值县

             var district = function(){

                 temp_html = "";

                 var m = oProvince.get(0).selectedIndex;

                 var n = oCity.get(0).selectedIndex;

                 if(typeof(areaJson[m].c[n].d) == "undefined"){

                     oDistrict.css("display","none");

                 }else{

                     oDistrict.css("display","inline");

                     $.each(areaJson[m].c[n].d,function(i,district){

                         temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";

                     });

                     oDistrict.html(temp_html);

                 };

             };

             //选择省改变市

             oProvince.change(function(){

                 city();

             });

             //选择市改变县

             oCity.change(function(){

                 district();

             });

             //获取json数据

             $.getJSON(url,function(data){

                 areaJson = data;

                 province();

             });

         });

     });

     </script>

 </body>

 </html>

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>selectList</title>
<style type="text/css">
*{margin:0;padding:0;}
.selectList{width:200px;margin:50px auto;}
</style>
<script type="text/javascript" src="jquery1.7.1.js"></script>
</head>
<body>
<div class="selectList">
<select class="province">
<option>请选择</option>
</select>
<select class="city">
<option>请选择</option>
</select>
<select class="district">
<option>请选择</option>
</select>
</div>
<div class="selectList">
<select class="province">
<option>请选择</option>
</select>
<select class="city">
<option>请选择</option>
</select>
<select class="district">
<option>请选择</option>
</select>
</div>
<script type="text/javascript">
$(function(){
$(".selectList").each(function(){
var url = "area.json";
var areaJson;
var temp_html;
var oProvince = $(this).find(".province");
var oCity = $(this).find(".city");
var oDistrict = $(this).find(".district");
//初始化省
var province = function(){
$.each(areaJson,function(i,province){
temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
});
oProvince.html(temp_html);
city();
};
//赋值市
var city = function(){
temp_html = "";
var n = oProvince.get(0).selectedIndex;
$.each(areaJson[n].c,function(i,city){
temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
});
oCity.html(temp_html);
district();
};
//赋值县
var district = function(){
temp_html = "";
var m = oProvince.get(0).selectedIndex;
var n = oCity.get(0).selectedIndex;
if(typeof(areaJson[m].c[n].d) == "undefined"){
oDistrict.css("display","none");
}else{
oDistrict.css("display","inline");
$.each(areaJson[m].c[n].d,function(i,district){
temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";
});
oDistrict.html(temp_html);
};
};
//选择省改变市
oProvince.change(function(){
city();
});
//选择市改变县
oCity.change(function(){
district();
});
//获取json数据
$.getJSON(url,function(data){
areaJson = data;
province();
});
});
});
</script>
</body>
</html>

json文件（area.json），这里只是事例，根据情况添加或编写

[
{"p":"江西省",
"c":[
{"ct":"南昌市",
"d":[
{"dt":"西湖区"},
{"dt":"东湖区"},
{"dt":"高新区"}
]},
{"ct":"赣州市",
"d":[
{"dt":"瑞金县"},
{"dt":"南丰县"},
{"dt":"全南县"}
]}
]},
{"p":"北京",
"c":[
{"ct":"东城区"},
{"ct":"西城区"}
]},
{"p":"河北省",
"c":[
{"ct":"石家庄",
"d":[
{"dt":"长安区"},
{"dt":"桥东区"},
{"dt":"桥西区"}
]},
{"ct":"唐山市",
"d":[
{"dt":"滦南县"},
{"dt":"乐亭县"},
{"dt":"迁西县"}
]}
]}
]

简单jquery实现select三级联动的更多相关文章

  1. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  2. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  3. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

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

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

  5. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

  6. jquery全国省市区三级联动插件distpicker

    使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...

  7. jquery实现select二级联动

    jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  8. JQuery+Json 省市区三级联动

    一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...

  9. 简单的纯js三级联动

    参考这个  日尼禾尔  二级联动 写了三级联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

随机推荐

  1. linux 学习7 用户管理相关文件 r

    7.1.用户配置文件 7.2.用户管理相关文件 7.3.用户管理命令 7.4.用户组管理命令 删除用户userdel [root@localhost ~]# userdel [-r] 用户名 //一定 ...

  2. http://www.360doc.com/content/13/0516/22/12094763_285956121.shtml

    http://www.360doc.com/content/13/0516/22/12094763_285956121.shtml

  3. servlet service() for servlet jsp throws null pointer exception

    这么一件小事折腾了一个多小时,google也上不去,对百度我就不吐槽什么了,最后用bing查出了满意的结果.一般程序中不要显式把jsp.jar和servlet.jar放在Lib目录下,因为tomcat ...

  4. ORACLE临时表空间

    ORACLE临时表空间总结 2014-10-05 11:35 by 潇湘隐者, 临时表空间概念 临 时表空间用来管理数据库排序操作以及用于存储临时表.中间排序结果等临时对象,当ORACLE里需要用到S ...

  5. redis make时 提示 zmalloc.h:50:31: error: jemalloc/jemalloc.h:

    redis安装需要环境必备 gcc 但是若未先安装好gcc,make失败后再次 make 会提示如下错误 zmalloc.h:50:31: error: jemalloc/jemalloc.h: 这时 ...

  6. python动态获取对象的属性和方法 （转载）

    首先通过一个例子来看一下本文中可能用到的对象和相关概念. #coding:utf-8 import sys def foo():pass class Cat(object): def __init__ ...

  7. javascript的数值转换

    在javascript中数值转换,最要的一点是函数第一个字母必须要大写.js中的函数有string字符型.number数值型.null空型.boolean布尔型.undefined未定义. 具体的转换 ...

  8. 抢凳子日数据sql

    --先找到档期select * from hv_item_info a where a.report_begdate > '2016-07-28' and a.report_begdate &l ...

  9. Redis(一)基础

    Redis Remote Dictionary Server 远程字典服务器 功能 缓存(当空间达到限制时,可以按照一定规则,淘汰部分数据) 队列(支持阻塞式读取) 订阅/发布(可以将其做出聊天室) ...

  10. spring整合struts2

    1. Spring 如何在 WEB 应用中使用 ? 1). 需要额外加入的 jar 包: spring-web-4.0.0.RELEASE.jarspring-webmvc-4.0.0.RELEASE ...