基于此篇文章，修改一些源代码，可实现下拉1-3级联动，其中option中 value=id,text=name
chrome 本地测试，url:"js/json.min.js" 这种方式不支持，直接写json是支持的
1、html源码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ajax,jquery,三级联动" />
<title>jQuery+JSON三级联动效果</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.threeselect.js"></script>
<script type="text/javascript">
$(function(){
$("#city_1").citySelect({
url:"js/json.min.js",//必选 （可以是文件，也可以是json）
frist:'',//可选
secend:'',//可选
third:'',//可选
class_first:'prov',//第一个select classname //必选
class_secend:'city',//第二个select classname //可选（只需要一级 此选项不填）
class_third:'dist',//第三个select classname //可选（只需要二级 此选项不填）
first_children:"cityitylist",//一级 //必选
secend_children:"city",//二级 //可选 （只需要一级 此选项不填）
third_children:"dist",//三级 //可选（只需要二级 此选项不填）
nodata:"none", //可选
required:true //可选
});
$("#city_2").citySelect({
url:"js/json.min.js",
frist:'',
secend:'',
third:'',
class_first:'prov',//第一个select classname
class_secend:'city',//第二个select classname
class_third:'dist',//第三个select classname
first_children:"cityitylist",//一级
secend_children:"city",//二级
third_children:"dist",//三级
nodata:"hidden",
required:false
});
$("#game").citySelect({
url:{"list":[{"id":1,"name":"1区","child":[{"id":1,"name":"1服","children":[{"id":1,"name":"test"}]},{"id":2,"name":"2服"}]},{"id":2,"name":"2区","child":[{"id":1,"name":"1服"},{"id":2,"name":"2服"}]}]},
frist:'',
secend:'',
third:'',
class_first:'qu',//第一个select classname
class_secend:'fu',//第二个select classname
class_third:'user',//第三个select classname
first_children:"list",//一级
secend_children:"child",//二级
third_children:"children",//三级
nodata:"",
required:false
});
});
</script>
</head>
<body>
<div id="main">
<div class="demo">
<h3>设置省份、城市、地区（县）的默认值</h3>
<p>二级联动</p>
<div id="city_1">
<select class="prov"></select>
<select class="city" disabled="disabled"></select>
</div>
<p>三级联动</p>
<div id="city_2">
<select class="prov"></select>
<select class="city" disabled="disabled"></select>
<select class="dist" disabled="disabled"></select>
</div>
</div>
<div class="demo">
<h3>自定义游戏服务区选项</h3>
<div id="game">
<select class="qu"></select>
<select class="fu" disabled="disabled"></select>
<select class="user" disabled="disabled"></select>
</div>
</div>
</div>
</body>
</html>
2、js源码：
/*
Ajax 三级联动
settings 参数说明
-----
url:数据josn文件路径,也可以是json数据 //必须
frist:默认第一个值
secend:默认第二个值
third:默认第三个值
class_first:第一个选择框的class name //必须
class_secend:第二个选择框的class name //必须
class_third:第三个选择框的class name //必须
first_children:第一层字段
secend_children:第二个选择框与第一个选择框关联字段
third_children:第三个选择框与第二个选择框关联字段
required:必选项
nodata:无数据状态
------------------------------ */
(function($){
$.fn.citySelect=function(settings){
if(this.length<1){return;};
// 默认值
settings=$.extend({
url:"",
frist:null,
secend:null,
third:null,
class_first:null,
class_secend:null,
class_third:null,
first_children:"first_children",
secend_children:"secend_children",
third_children:"third_children",
nodata:null,
required:true
},settings);
var box_obj=this;
var frist_obj=box_obj.find("."+settings.class_first);
var secend_obj=box_obj.find("."+settings.class_secend);
var third_obj=box_obj.find("."+settings.class_third);
var frist_val=settings.first;
var secend_val=settings.secend;
var third_val=settings.third;
var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>";
var node_first = settings.first_children;
var node_secend = settings.secend_children;
var node_third = settings.third_children;
var json_data;
// 赋值第二个选择框
var secendStart=function(){
var frist_id=frist_obj.get(0).selectedIndex;
if(!settings.required){
frist_id--;
};
secend_obj.empty().attr("disabled",true);
third_obj.empty().attr("disabled",true);
if(frist_id<0||typeof(json_data[node_first][frist_id][node_secend])=="undefined"){
if(settings.nodata=="none"){
secend_obj.css("display","none");
third_obj.css("display","none");
}else if(settings.nodata=="hidden"){
secend_obj.css("visibility","hidden");
third_obj.css("visibility","hidden");
};
return;
};
// 遍历赋值第二下拉列表
temp_html=select_prehtml;
$.each(json_data[node_first][frist_id][node_secend],function(i,secend){
temp_html+="<option value='"+secend.id+"'>"+secend.name+"</option>";
});
secend_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
thirdStart();
};
// 赋值第三个选择框
var thirdStart=function(){
var frist_id=frist_obj.get(0).selectedIndex;
var secend_id=secend_obj.get(0).selectedIndex;
if(!settings.required){
frist_id--;
secend_id--;
};
third_obj.empty().attr("disabled",true);
if(frist_id<0||secend_id<0||typeof(json_data[node_first][frist_id][node_secend][secend_id][node_third])=="undefined"){
if(settings.nodata=="none"){
third_obj.css("display","none");
}else if(settings.nodata=="hidden"){
third_obj.css("visibility","hidden");
};
return;
};
// 遍历赋值第三下拉列表
temp_html=select_prehtml;
$.each(json_data[node_first][frist_id][node_secend][secend_id][node_third],function(i,third){
temp_html+="<option value='"+third.id+"'>"+third.name+"</option>";
});
third_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
};
var init=function(){
// 遍历赋值第一下拉列表
temp_html=select_prehtml;
$.each(json_data[node_first],function(i,first){
temp_html+="<option value='"+first.id+"'>"+first.name+"</option>";
});
frist_obj.html(temp_html);
// 若有传入第一、第二的值，则选中。（setTimeout为兼容IE6而设置）
setTimeout(function(){
if(settings.first!=null){
frist_obj.val(settings.first);
secendStart();
setTimeout(function(){
if(settings.secend!=null){
secend_obj.val(settings.secend);
thirdStart();
setTimeout(function(){
if(settings.third!=null){
third_obj.val(settings.third);
};
},1);
};
},1);
};
},1);
// 选择第一选择框时发生事件
frist_obj.bind("change",function(){
secendStart();
});
// 选择第二选择框时发生事件
secend_obj.bind("change",function(){
thirdStart();
});
};
// 设置json数据
if(typeof(settings.url)=="string"){
$.getJSON(settings.url,function(json){
json_data=json;
init();
});
}else{
json_data=settings.url;
init();
};
};
})(jQuery);
3、json格式
{"cityitylist":[{"id":1,"name":"北京","city":[{"id":2,"name":"东城区","dist":[{"id":1001,"name":"测试县1"},{"id":1002,"name":"测试县2"},{"id":1003,"name":"测试县3"},{"id":1004,"name":"测试区"}]},{"id":3,"name":"西城区"},{"id":4,"name":"崇文区"},{"id":5,"name":"宣武区"},{"id":6,"name":"朝阳区"},{"id":7,"name":"丰台区"},{"id":8,"name":"石景山区"},{"id":9,"name":"海淀区"},{"id":10,"name":"门头沟区"},{"id":11,"name":"房山区"},{"id":12,"name":"通州区"},{"id":13,"name":"顺义区"},{"id":14,"name":"昌平区"},{"id":15,"name":"大兴区"},{"id":16,"name":"平谷区"},{"id":17,"name":"怀柔区"},{"id":18,"name":"密云县"},{"id":19,"name":"延庆县"}]},{"id":20,"name":"天津","city":[{"id":21,"name":"和平区"},{"id":22,"name":"河东区"},{"id":23,"name":"河西区"},{"id":24,"name":"南开区"},{"id":25,"name":"河北区"},{"id":26,"name":"红挢区"},{"id":27,"name":"滨海新区"},{"id":28,"name":"东丽区"},{"id":29,"name":"西青区"},{"id":30,"name":"津南区"},{"id":31,"name":"北辰区"},{"id":32,"name":"宁河区"},{"id":33,"name":"武清区"},{"id":34,"name":"静海县"},{"id":35,"name":"宝坻区"},{"id":36,"name":"蓟县"}]}]}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
