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节点
$.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 />
企业：<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、发布按钮禁用否从发布按钮启用，感兴趣的朋友可以详细了解下哈2013-04-04
这篇文章主要给大家简单介绍了jQuery.prop() 使用方法，有需要的小伙伴可以参考下2015-07-07
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
jqeury的validationEngine做ajax校验，当表单中的最后一个字段需要做ajax验证,在字段输入完毕后点击回车提交表单时不起作用，接下来为大家介绍下解决方法感兴趣的各位可以参考下哈2013-03-03
本文给大家详细介绍了jQuery中的原型方法map的使用指南和源码分析，十分的不错，对于大家学习jQuery非常有帮助，这里推荐给大家。2015-07-07
下面小编就为大家带来一篇jquery点击改变class并toggle的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了jQuery插件支持同一页面被多次调用的相关资料,需要的朋友可以参考下2016-02-02
Jquery阻止事件冒泡 event.stopPropagation
帮朋友写了一个小效果，单击标签后标签变色并添加一个叉的图片，点击叉标签恢复原样，具体效果请点击下面的result2011-12-12
jQuery是一个优秀的JavaScript框架，可以很好的解决不同浏览器兼容的问题，尤其是在ASP.NET MVC下，它的作用更加的凸显。2009-12-12
这篇文章主要介绍了jquery实现左右滑动菜单效果代码，涉及jquery鼠标事件相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下2015-09-09
本文给大家分享jquery自适应窗口大小导航菜单，也是一款响应式的导航菜单，有深色样式、浅色样式、自定义样式，接下来，需要的学习的小伙伴参考此文吧2015-09-09
最新评论