首页 > web前端 > js教程 > 正文

简单实用jquery版三级联动select示例_jquery

WBOY
发布: 2016-05-16 17:30:05
原创
993 人浏览过

html和js部分

复制代码代码如下:

gt ;

<头>

selectList标题>

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


<身体>


请选择选项>;


请选择选项>;


请选择选项>;




请选择选项>;


请选择选项>;


请选择选项>;



$(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 ="<选项值='" 省.p "'>" 省.p "";
});
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 ="<选项值='" city.ct "'>" city.ct "")
oCity.html(temp_html);
district();
//属性县
var District = function(){
temp_html = ""; m = oProvince.get(0).selectedIndex;
var n = oCity.get(0).selectedIndex;
if(typeof(areaJson[m].c[n].d) == "未定义" ){
oDistrict.css("显示","无");
}else{
oDistrict.css("显示","内联");
$.each(areaJson[m].c[n].d,function(i,district){
temp_html ="<选项值='"district.dt "'>"district.dt “
});
oDistrict.html(temp_html);
};
};
//选择省改变市
oProvince.change(function(){
city();
});
//选择市改县
oCity.change(function(){
district();
});
//获取json数据
$.getJSON(url,function(data){
areaJson = data;
province();
});
});
});





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":"迁西县"}
]}
]}
]


各位最好自己封装制作插件,方便调用
相关标签:
来源:php.cn
上一篇:js一般方法改写成面向对象方法的无限级折叠菜单示例代码_javascript技巧 下一篇:Jquery获取复选框被选中值的简单方法_jquery
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板