jQuery實現三級聯動效果
更新時間：2017年03月02日 15:55:17 作者：Akeke
這篇文章主要為大家詳細介紹了jQuery實現三級聯動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
很久沒寫了，順帶復習，寫了一個jQuery實現的三級聯動，供大家參考，具體內容如下
<!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>");
}
//多維數組做數據來源
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>
產品：<select id="selB">
<option>---請選擇---</option>
</select>
嗯嗯：<select id="selC">
<option>---請選擇---</option>
</select>
<p id="pid"></p>
</div>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jquery實現textarea輸入字符控制(仿微博輸入控制字符)
首先獲取輸入框的值然后獲取輸入框的值;如果字數大于500、發(fā)布按鈕禁用否從發(fā)布按鈕啟用，感興趣的朋友可以詳細了解下哈2013-04-04
這篇文章主要給大家簡單介紹了jQuery.prop() 使用方法，有需要的小伙伴可以參考下2015-07-07
jquery中使用$(#form).submit()重寫提交表單無效原因分析及解決
jqeury的validationEngine做ajax校驗，當表單中的最后一個字段需要做ajax驗證,在字段輸入完畢后點擊回車提交表單時不起作用，接下來為大家介紹下解決方法感興趣的各位可以參考下哈2013-03-03
本文給大家詳細介紹了jQuery中的原型方法map的使用指南和源碼分析，十分的不錯，對于大家學習jQuery非常有幫助，這里推薦給大家。2015-07-07
下面小編就為大家?guī)硪黄猨query點擊改變class并toggle的實現代碼。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了jQuery插件支持同一頁面被多次調用的相關資料,需要的朋友可以參考下2016-02-02
Jquery阻止事件冒泡 event.stopPropagation
幫朋友寫了一個小效果，單擊標簽后標簽變色并添加一個叉的圖片，點擊叉標簽恢復原樣，具體效果請點擊下面的result2011-12-12
jQuery是一個優(yōu)秀的JavaScript框架，可以很好的解決不同瀏覽器兼容的問題，尤其是在ASP.NET MVC下，它的作用更加的凸顯。2009-12-12
這篇文章主要介紹了jquery實現左右滑動菜單效果代碼，涉及jquery鼠標事件相關技巧，具有一定參考借鑒價值，需要的朋友可以參考下2015-09-09
本文給大家分享jquery自適應窗口大小導航菜單，也是一款響應式的導航菜單，有深色樣式、淺色樣式、自定義樣式，接下來，需要的學習的小伙伴參考此文吧2015-09-09