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

在查询与列表显示的时候经常用到联动列表显示，比如一级选项是国家，二级选项是省，三级是市，这样的联动是联系的实时导出的，比如你不可能选择了四川省却在三级联动栏中出现济南市，这样的联动实现方法如下：

效果图示：

实现源代码：

html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title meta name=' keywords ' content=' keywords '/meta name=' description ' content=' description '/head script type=' text/JavaScript ' src=' http : jquery-1。4 .2 .量滴js '/script style type=' text/CSS ' body { font-size 336013 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以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。