html下拉显示多级联动,jQuery实现多级联动下拉列表查询框

本文实例介绍了jQuery实现多级联动下拉列表查询框的详细代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

body{font-size:13px}

.clsInit{width:435px;height::35px;line-height:35px;padding-left:10px}

.clsTip{padding-top:5px;background-color:#eee;display:none}

.btn{border:solid 1px #666;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;filter:progid:DXImageTransform.Mcrosoft.Gradient(GraientType=0,StartColorStr=#FFFFFF,EndColorStr=#ECE9D8);}

$(function(){

function objInit(obj){

return $(obj).html('请选择');

}

var arrData={

厂商1:

{

品牌一:'型号1-1-1,型号1-1-2',

品牌二:'型号1-2-1,型号1-2-2'

},

厂商2:

{

品牌一:'型号2-1-1,型号2-1-2',

品牌二:'型号2-2-1,型号2-2-2'},

厂商3:

{

品牌一:'型号3-1-1,型号3-1-2',

品牌二:'型号3-2-1,型号3-2-2'

}

};

$.each(arrData,function(pF){

$('#selF').append(''+pF+'');

});

$('#selF').change(function(){

objInit('#selT');

objInit('#selC');

$.each(arrData,function(pF,pS){

if($('#selF option:selected').text()==pF){

$.each(pS,function(pT,pC){

$('#selT').append(''+pT+'');

});

$('#selT').change(function(){

objInit('#selC');

$.each(pS,function(pT,pC){

if($('#selT option:selected').text()==pT){

$.each(pC.split(","),function(){

$('#selC').append(''+this+'');

})

}

})

});

}

})

});

});

厂商：请选择

品牌：请选择

型号：请选择

希望本文所述对大家学习jquery程序设计有所帮助。