好久沒發帖了，今天發一個jquery select的表單三級聯動，希望能對有需要的朋友有點幫助。
js代碼，當然還要加上jquery的包，應該都有的，這里就不發了。
<script type="text/javascript">
var threeSelectData={
"選擇頻道":{
val:"",
items:{
"二級子菜單":{
val:"",
items:{
"三級子菜單":""
}
}
}
},
"jquery特效":{
val:"jquery",
items:{
"jquery圖片特效":{
val:"jqpic",
items:{
"jquery圖片切換":"jqpic-01",
"jquery幻燈片":"jqpic-02",
"jquery圖片滾動":"jqpic-03",
"jquery圖片放大":"jqpic-04",
"jquery廣告":"jqpic-05",
"jquery圖片其它":"jqpic-06"
}
},
"jquery導航菜單":{
val:"jqnav",
items:{
"jquery動畫菜單":"jqnav-01",
"jquery下拉菜單":"jqnav-02",
"jquery手風琴菜單":"jqnav-03",
"jquery導航其它":"jqnav-04"
}
},
"jquery選項卡特效":{
val:"jqtab",
items:{
"jquery選項卡切換":"jqtab-01",
"jquery滑動選項卡":"jqtab-02"
}
},
"jquery文字特效":{
val:"jqfont",
items:{
"jquery文字滾動":"jqfont-01",
"jquery文字切換":"jqfont-02",
"jquery文字其它":"jqfont-03"
}
},
"jquery表單特效":{
val:"jqform",
items:{
"jquery表單驗證":"jqform-01",
"jquery表單美化":"jqform-02",
"jquery表單其它":"jqform-03"
}
},
"jquery滾動條美化":{
val:"jqscroll",
items:{}
},
"jquery評分,進度條,日期時間":{
val:"jqrate",
items:{}
},
"jquery提示框,彈出層,浮動層":{
val:"jqdiv",
items:{}
},
"jquery其它特效":{
val:"jqother",
items:{}
}
}
},
"js特效":{
val:"js",
items:{
"js圖片特效":{
val:"jspic",
items:{
"js圖片切換":"jspic-01",
"js幻燈片":"jspic-02",
"js圖片滾動":"jspic-03",
"js圖片放大":"jspic-04",
"js廣告":"jspic05",
"js圖片其它":"jspic-06"
}
},
"js導航菜單":{
val:"jsnav",
items:{
"js動畫菜單":"jsnav-01",
"js下拉菜單":"jsnav-02",
"js手風琴菜單":"jsnav-03",
"js導航其它":"jsnav-04"
}
},
"js選項卡特效":{
val:"jstab",
items:{
"js選項卡切換":"jstab-01",
"js滑動選項卡":"jstab-02"
}
},
"js文字特效":{
val:"jsfont",
items:{
"js文字滾動":"jsfont-01",
"js文字切換":"jsfont-02",
"js文字其它":"jsfont-03"
}
},
"js表單特效":{
val:"jsform",
items:{
"js表單驗證":"jsform-01",
"js表單美化":"jsform-02",
"js表單其它":"jsform-03"
}
},
"js滾動條美化":{
val:"js-scroll",
items:{}
},
"js評分,進度條,日期時間":{
val:"js-rate",
items:{}
},
"js提示框,彈出層,浮動層":{
val:"js-div",
items:{}
},
"js其它特效":{
val:"js-other",
items:{}
}
}
},
"flash特效":{
val:"flash",
items:{
"圖片特效":{
val:"flash-pic",
items:{}
},
"導航菜單":{
val:"flash-nav",
items:{}
},
"文字特效":{
val:"flash-font",
items:{}
},
"其它":{
val:"flash-other",
items:{}
}
}
},
"div+css教程":{
val:"divcss",
items:{
"div+css布局":{
val:"divcss-layout",
items:{}
},
"div+css菜單":{
val:"divcss-nav",
items:{}
},
"css3教程":{
val:"div-css3",
items:{}
},
"其它":{
val:"divcss-other",
items:{}
}
}
},
"html5教程":{
val:"html5",
items:{
"html5特效":{
val:"html5-tx",
items:{}
},
"html5圖表":{
val:"html5-map",
items:{}
},
"其它":{
val:"html5-other",
items:{}
}
}
}
};
var defaults = {
s1:'mainselect',
s2:'midselect',
s3:'backselect'
};
$(function(){
threeSelect(defaults);
});
function threeSelect(config){
var $s1=$("#"+config.s1);
var $s2=$("#"+config.s2);
var $s3=$("#"+config.s3);
var v1=config.v1?config.v1:null;
var v2=config.v2?config.v2:null;
var v3=config.v3?config.v3:null;
$.each(threeSelectData,function(k,v){
appendOptionTo($s1,k,v.val,v1);
});
$s1.change(function(){
$s2.html("");
$s3.html("");
if(this.selectedIndex==-1)
return;
var s1_curr_val = this.options[this.selectedIndex].value;
$.each(threeSelectData,function(k,v){
if(s1_curr_val==v.val){
if(v.items){
$.each(v.items,function(k,v){
appendOptionTo($s2,k,v.val,v2);
});
}
}
});
if($s2[0].options.length==0){
appendOptionTo($s2,"...","",v2);
}
$s2.change();
}).change();
$s2.change(function(){
$s3.html("");
var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
if(this.selectedIndex==-1)
return;
var s2_curr_val = this.options[this.selectedIndex].value;
$.each(threeSelectData,function(k,v){
if(s1_curr_val==v.val){
if(v.items){
$.each(v.items,function(k,v){
if(s2_curr_val==v.val){
$.each(v.items,function(k,v){
appendOptionTo($s3.show(),k,v,v3);
});
}
});
if($s3[0].options.length==0){
appendOptionTo($s3.hide(),"...","",v3);
}
}
}
});
}).change();
function appendOptionTo($o,k,v,d){
var $opt=$("<option>").text(k).val(v);
if(v==d){
$opt.attr("selected", "selected")
}
$opt.appendTo($o);
}
}
</script>
html代碼很簡單：
<select id="mainselect" name="mainselect" style="width:120px;"></select> <select id="midselect" name="midselect" style="width:220px;"></select> <select id="backselect" name="backselect" style="width:160px;"></select>