jQuery实现多级联动下拉列表查询框

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

效果图：

具体代码：

html头元http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/title/title meta name=' keywords ' content=' keywords '/meta name=' description ' content=' description '/head script src=' http :http://upcdn。B0。乌派云。com/libs/jquery/jquery-2。0 .2 .量滴js '/script style type=' text/CSS ' body { font-size :13 px } .clsInit { width:435px高度高度：35px线高：35 px左填充left:10px } .clsTip { padding-top :5 px；背景色： # eeedisplay:none} .BTN { border : solid 1px # 666 padd :2 px宽度：65 px右浮动：页边距-top :6 px；右边距：6 px过滤器： progid : maximagettransform .麦克罗斯夫。渐变(graient type=0，StartColorStr=# FFFFFF，endcolorst=# ece9d 8)；}/style body script type=' text/JavaScript ' $(function(){ function Objinit(obj){ return $(obj)).html(“”选项请选择/option ')；} 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' } };$.每个(arrData，function(pF){ $('#selF ')).追加('选项pF '/选项');});$('#selF ').change(function(){ Objinit(' # SelT ')；objInit(' # SelC ')；$.每个(arrData，function(pF，PS){ if($(' # SelF options : select ')).text()==pF){ $ .每个(pS，函数(pT，pC){ $('#selT ').追加(' option ' pT '/option ')；});$('#selT ').change(function(){ Objinit(' # SelC ')；$.每个(pS，函数(pT，Pc){ if($(' # SelT options : select ').text()==pT){ $ .每个(pC.split('，')，函数(){ $('#selC ').追加(“option”this/“option”)；}) } }) });} }) });});/scriptdiv类='clsInit '厂商：选择id='selF '选项请选择/option/select品牌：选择id='selT '选项请选择/option/select型号：选择id='selC '选项请选择/option/select输入类型='按钮'值='查询id=' button 1 ' class=' BTN '/div div class=' Clsinit ' id=' div tip '/div/body/html希望本文所述对大家学习jquery程序设计有所帮助。