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程序设计有所帮助。
版权声明:jQuery实现多级联动下拉列表查询框是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。