js select下拉聯(lián)動 更具級聯(lián)性!
之前有過記錄,select下拉聯(lián)動 (Bootstrap、JQuery插件之cxselect)區(qū)別在這個級聯(lián)性更強。
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>請選擇</option></select></td> <td>品牌:</td> <td><select id="selT"><option>請選擇</option></select></td> <td>型號:</td> <td><select id="selC"><option>請選擇</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>請選擇</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":"型號1-1-1"},{"n":"型號1-1-2"}] }, { "n":"品牌二", "s":[{"n":"型號1-2-1"},{"n":"型號1-2-2"}] } ] }, { "n":"廠商2", "s":[ { "n":"品牌一", "s":[{"n":"型號2-1-1"},{"n":"型號2-1-2"}] }, { "n":"品牌二", "s":[{"n":"型號2-2-1"},{"n":"型號2-2-2"}] } ] }, { "n":"廠商3", "s":[ { "n":"品牌一", "s":[{"n":"型號3-1-1"},{"n":"型號3-1-2"}] }, { "n":"品牌二", "s":[{"n":"型號3-2-1"},{"n":"型號3-2-2"}] } ] } ]
Find more from: //www.dbjr.com.cn/article/102040.htm
以上就是本文的全部內(nèi)容,希望對大家的學(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實現(xiàn)文字跟隨鼠標(biāo)移動而移動的方法
這篇文章主要介紹了js實現(xiàn)文字跟隨鼠標(biāo)移動而移動的方法,實例分析了javascript處理鼠標(biāo)事件及文字特效的技巧,需要的朋友可以參考下2015-02-02JS使用setInterval計時器實現(xiàn)挑戰(zhàn)10秒
這篇文章主要為大家詳細(xì)介紹了JS使用setInterval計時器實現(xiàn)挑戰(zhàn)10秒,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript用Number方法實現(xiàn)string轉(zhuǎn)int
parseInt方法在format'00'開頭的數(shù)字時會當(dāng)作2進(jìn)制轉(zhuǎn)10進(jìn)制,所以建議string轉(zhuǎn)int最好用Number方法2014-05-05微信小程序清空輸入框信息與實現(xiàn)屏幕往上滾動的示例代碼
這篇文章主要介紹了微信小程序清空輸入框信息與實現(xiàn)屏幕往上滾動的示例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06setTimeout與setInterval的區(qū)別淺析
這篇文章主要給大家介紹了關(guān)于setTimeout與setInterval區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03