简单的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. 手动部署servlet

    1.编写servlet,在tomcat\webapps目录下新建文件Test,Test目录如下 Test | classes   web.xml | test01 | Servletfirst.jav ...

  2. 各版本CRM所需端口号

    以下是微软官方提供的CRM端口号列表,收藏一下: 4.0 :https://msdn.microsoft.com/en-us/library/dd979226(v=crm.6).aspx This s ...

  3. 数字信号处理--Z变换，傅里叶变换，拉普拉斯变换

    傅立叶变换.拉普拉斯变换.Z变换最全攻略 作者:时间:2015-07-19来源:网络       傅立叶变换.拉普拉斯变换.Z变换的联系?他们的本质和区别是什么?为什么要进行这些变换.研究的都是什么? ...

  4. 数据转移发现font有问题

    本地正常 以为是mime.types没有 但是发现是存在的  然后根据提示百度了很久都没有解决 解决: 去字体官网下载改字体文件下来 上传到服务器 发现可以正常访问 说明不是服务器的问题 有个提示 i ...

  5. ffmpeg 音频转换: use ffmpeg convert the audio from stereo to mono without changing the video part

    To convert the audio from stereo to mono without changing the video part, you can use FFmpeg: ffmpeg ...

  6. autoLayout约束图解

  7. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  8. ios 关于状态栏的一些小知识

    一.改变状态栏颜色 状态栏分为两种颜色,默认的是黑色,这里想要改为白色: 分为两步: 第一步:在项目中找到plist文件,添加View controller-based status bar appe ...

  9. linux之find命令详解

    linux之find命令详解 查找文件find ./ -type f查找目录find ./ -type d查找名字为test的文件或目录find ./ -name test查找名字符合正则表达式的文件 ...

  10. hdu 1251 统计难题 (字典树入门题）

    /******************************************************* 题目: 统计难题 (hdu 1251) 链接: http://acm.hdu.edu. ...