js select下拉聯(lián)動(dòng) 更具級(jí)聯(lián)性!
之前有過記錄,select下拉聯(lián)動(dòng) (Bootstrap、JQuery插件之cxselect)區(qū)別在這個(gè)級(jí)聯(lián)性更強(qiáng)。
HTML源碼:
<!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="USjs.js"></script> <body> <div class="container"> <table> <tr> <td>廠商:</td> <td><select id="selF"><option>請(qǐng)選擇</option></select></td> <td>品牌:</td> <td><select id="selT"><option>請(qǐng)選擇</option></select></td> <td>型號(hào):</td> <td><select id="selC"><option>請(qǐng)選擇</option></select></td> <td><input type="button" value="查詢" id="Button1" class="btn" /></td> </tr> </table> </div> </body> </html>
JS(USjs.js)源碼: 在轉(zhuǎn)載的基礎(chǔ)上做了修改,特別是源數(shù)據(jù)JSON格式。
$(function(){ function objInit(obj){ return $(obj).html('<option>請(qǐng)選擇</option>'); } $.getJSON('data.json', function(json) { var arrData = json; $.each(arrData,function(pF,pV){ $('#selF').append('<option value="'+pF+'">'+pV.n+'</option>'); }); $('#selF').change(function(){ objInit('#selT'); objInit('#selC'); $.each(arrData,function(pF,pS){ if($('#selF option:selected').attr('value')==pF){ $.each(pS.s,function(pT,pC){ $('#selT').append('<option value="'+pT+'">'+pC.n+'</option>'); }); $('#selT').change(function(){ objInit('#selC'); $.each(pS.s,function(pT,pC){ if($('#selT option:selected').attr('value')==pT){ $.each(pC.s,function(ii,vv){ $('#selC').append('<option value="'+ii+'">'+vv.n+'</option>'); }) } }) }); } }) }); }); //getJSON });
JSON(data.json)文件
[ { "n":"廠商1", "s":[ { "n":"品牌一", "s":[{"n":"型號(hào)1-1-1"},{"n":"型號(hào)1-1-2"}] }, { "n":"品牌二", "s":[{"n":"型號(hào)1-2-1"},{"n":"型號(hào)1-2-2"}] } ] }, { "n":"廠商2", "s":[ { "n":"品牌一", "s":[{"n":"型號(hào)2-1-1"},{"n":"型號(hào)2-1-2"}] }, { "n":"品牌二", "s":[{"n":"型號(hào)2-2-1"},{"n":"型號(hào)2-2-2"}] } ] }, { "n":"廠商3", "s":[ { "n":"品牌一", "s":[{"n":"型號(hào)3-1-1"},{"n":"型號(hào)3-1-2"}] }, { "n":"品牌二", "s":[{"n":"型號(hào)3-2-1"},{"n":"型號(hào)3-2-2"}] } ] } ]
Find more from: //www.dbjr.com.cn/article/102040.htm
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Js操作Select大全(取值、設(shè)置選中等等)
- javascript Select標(biāo)記中options操作方法集合
- JS組件Bootstrap Select2使用方法詳解
- js 觸發(fā)select onchange事件代碼
- javascript操作select參考代碼
- jquery及原生js獲取select下拉框選中的值示例
- js 操作select和option常用代碼整理
- javascript之querySelector和querySelectorAll使用介紹
- js select多選列表傳值代碼
- js querySelector和getElementById通過id獲取元素的區(qū)別
相關(guān)文章
js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法
這篇文章主要介紹了js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法,實(shí)例分析了javascript處理鼠標(biāo)事件及文字特效的技巧,需要的朋友可以參考下2015-02-02JS簡(jiǎn)單獲得節(jié)點(diǎn)元素的方法示例
這篇文章主要介紹了JS簡(jiǎn)單獲得節(jié)點(diǎn)元素的方法,結(jié)合實(shí)例形式分析了javascript獲取頁(yè)面節(jié)點(diǎn)元素及修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-02-02JS使用setInterval計(jì)時(shí)器實(shí)現(xiàn)挑戰(zhàn)10秒
這篇文章主要為大家詳細(xì)介紹了JS使用setInterval計(jì)時(shí)器實(shí)現(xiàn)挑戰(zhàn)10秒,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript用Number方法實(shí)現(xiàn)string轉(zhuǎn)int
parseInt方法在format'00'開頭的數(shù)字時(shí)會(huì)當(dāng)作2進(jìn)制轉(zhuǎn)10進(jìn)制,所以建議string轉(zhuǎn)int最好用Number方法2014-05-05微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕往上滾動(dòng)的示例代碼
這篇文章主要介紹了微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕往上滾動(dòng)的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06setTimeout與setInterval的區(qū)別淺析
這篇文章主要給大家介紹了關(guān)于setTimeout與setInterval區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03javascript實(shí)現(xiàn)3D變換的立體圓圈實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)3D變換的立體圓圈效果,涉及javascript動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)滾動(dòng)與變色的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08