jQuery實現(xiàn)三級聯(lián)動效果
更新時間:2017年03月02日 15:55:17 作者:Akeke
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)三級聯(lián)動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
很久沒寫了,順帶復(fù)習(xí),寫了一個jQuery實現(xiàn)的三級聯(lián)動,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <style type="text/css"> body { font-size:13px;text-align:center; } div { width:400px;border:1px solid #000000; background-color:#f5e8e8;margin:100px 300px; padding:10px; } </style> <script type="text/javascript"> $(function () { function Init(node) { return node.html("<option>---請選擇---</option>"); } //多維數(shù)組做數(shù)據(jù)來源 var db = { 騰訊: { LOL: "德瑪,EZ瑞爾,劍圣", BNS: "氣功師,力士,刺客,氣宗師", DNF:"A,B,C,D" }, 阿里巴巴: { APPLAY: "AL,EZ瑞爾,劍圣", HUABEI: "AL,力士,刺客,氣宗師", JIEBEI: "AL,B,C,D" }, 百度: { ggs: "BD,EZ瑞爾,劍圣", BD: "BD,力士,刺客,氣宗師", BDBD: "BD,B,C,D", } }; //初始化select節(jié)點 $.each(db, function (changShang) { $("#selF").append("<option>" + changShang + "</option>"); }) //一級變動 $("#selF").change(function () { //清空二三級 Init($("#selB")); Init($("#selC")); $.each(db,function (cs,pps) { if ($("#selF option:selected").text() == cs) { $.each(pps, function (pp, xhs) { $("#selB").append("<option>" + pp + "</option>"); }); $("#selB").change(function () { Init($("#selC")); $.each(pps, function (pp,xhs) { if ($("#selB option:selected").text()==pp) { $.each(xhs.split(','), function () { $("#selC").append("<option>" + this + "</option>"); }) } }) }) } }) }) }) </script> </head> <body> <div class="bg-primary"> <hr /> 企業(yè):<select id="selF"> <option>---請選擇---</option> </select> 產(chǎn)品:<select id="selB"> <option>---請選擇---</option> </select> 嗯嗯:<select id="selC"> <option>---請選擇---</option> </select> <p id="pid"></p> </div> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- SSH結(jié)合jquery實現(xiàn)三級聯(lián)動效果
- 省市區(qū)三級聯(lián)動jquery實現(xiàn)代碼
- 基于jquery實現(xiàn)省市區(qū)三級聯(lián)動效果
- 簡單實用jquery版三級聯(lián)動select示例
- jquery+json 通用三級聯(lián)動下拉列表
- jQuery select表單提交省市區(qū)城市三級聯(lián)動核心代碼
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- jquery實現(xiàn)的省市區(qū)三級聯(lián)動
- 基于jQuery+JSON的省市二三級聯(lián)動效果
- jQuery+jsp實現(xiàn)省市縣三級聯(lián)動效果(附源碼)
相關(guān)文章
使用jQuery實現(xiàn)一個類似GridView的編輯,更新,取消和刪除的功能
在項目中遇到這樣的需求當(dāng)用戶點擊編輯時,在點擊行下動態(tài)產(chǎn)生一行,編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕,點擊“取消”銨鈕,刪除剛剛動態(tài)產(chǎn)生的行,編輯銨鈕狀態(tài)恢復(fù)。下面小編給大家分享實例代碼,一起看看吧2017-03-03