jquery select选中表单特效三级联动

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