您的位置:首页 > Web前端 > JQuery

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

2015-07-09 13:12 671 查看
好久没发帖了,今天发一个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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: