http://www.helloweba.com/view-blog-188.html
基於此篇文章，修改一些源代碼，可實現下拉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":"薊縣"}]}]}