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>