jQuery實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉列表查詢框
本文實(shí)例介紹了jQuery實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉列表查詢框的詳細(xì)代碼,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
具體代碼:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <meta name="keywords" content=" keywords" /> <meta name="description" content="description" /> </head> <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> <style type="text/css"> 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);} </style> <body> <script type="text/javascript"> $(function(){ function objInit(obj){ return $(obj).html('<option>請(qǐng)選擇</option>'); } var arrData={ 廠商1: { 品牌一:'型號(hào)1-1-1,型號(hào)1-1-2', 品牌二:'型號(hào)1-2-1,型號(hào)1-2-2' }, 廠商2: { 品牌一:'型號(hào)2-1-1,型號(hào)2-1-2', 品牌二:'型號(hào)2-2-1,型號(hào)2-2-2'}, 廠商3: { 品牌一:'型號(hào)3-1-1,型號(hào)3-1-2', 品牌二:'型號(hào)3-2-1,型號(hào)3-2-2' } }; $.each(arrData,function(pF){ $('#selF').append('<option>'+pF+'</option>'); }); $('#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('<option>'+pT+'</option>'); }); $('#selT').change(function(){ objInit('#selC'); $.each(pS,function(pT,pC){ if($('#selT option:selected').text()==pT){ $.each(pC.split(","),function(){ $('#selC').append('<option>'+this+'</option>'); }) } }) }); } }) }); }); </script> <div class="clsInit"> 廠商:<select id="selF"><option>請(qǐng)選擇</option></select> 品牌:<select id="selT"><option>請(qǐng)選擇</option></select> 型號(hào):<select id="selC"><option>請(qǐng)選擇</option></select> <input type="button" value="查詢" id="Button1" class="btn" /> </div> <div class="clsInit" id="divTip"></div> </body> </html>
希望本文所述對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
- jquery+json 通用三級(jí)聯(lián)動(dòng)下拉列表
- jQuery結(jié)合PHP+MySQL實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉列表[實(shí)例]
- jQuery 下拉列表 二級(jí)聯(lián)動(dòng)插件分享
- jQuery ajax+PHP實(shí)現(xiàn)的級(jí)聯(lián)下拉列表框功能示例
- 基于jquery的二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)代碼
- 簡(jiǎn)單實(shí)用jquery版三級(jí)聯(lián)動(dòng)select示例
- JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
- jquery 實(shí)現(xiàn)二級(jí)/三級(jí)/多級(jí)聯(lián)動(dòng)菜單的思路及代碼
- 省市區(qū)三級(jí)聯(lián)動(dòng)jquery實(shí)現(xiàn)代碼
- 基于jquery的無限級(jí)聯(lián)下拉框js插件
- jQuery實(shí)現(xiàn)動(dòng)態(tài)生成年月日級(jí)聯(lián)下拉列表示例
相關(guān)文章
基于jQuery實(shí)現(xiàn)數(shù)字滾動(dòng)效果
本文主要分享了基于jQuery實(shí)現(xiàn)數(shù)字滾動(dòng)效果的示例代碼,附源碼下載。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01JQuery中關(guān)于jquery.js與jquery.min.js的比較探討
jquery-1.4.2.min.js是優(yōu)化的,而query-1.4.2.js是易于開發(fā)著閱讀的,具體詳解祥看本文,希望對(duì)你有所幫助2013-05-05jQuery實(shí)現(xiàn)帶玻璃流光質(zhì)感的手風(fēng)琴特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶玻璃流光質(zhì)感的手風(fēng)琴特效,是一款基于jQuery+CSS3實(shí)現(xiàn)手風(fēng)琴特效,希望你可以喜歡。2015-11-11jQuery獲取頁面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用
這篇文章主要介紹了jQuery獲取頁面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用,需要的朋友可以參考下2015-07-07

牛叉的Jquery——Jquery與DOM對(duì)象的互相轉(zhuǎn)換及DOM的三種操作

jquery實(shí)現(xiàn)文本框數(shù)量加減功能的例子分享

jQuery復(fù)合事件結(jié)合toggle()方法的用法示例