好久没发帖了，今天发一个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>