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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索2012-01-01jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
这篇文章主要介绍了jQuery实现最简单的切换图效果,可兼容IE6、火狐、谷歌、opera等浏览器,涉及jQuery结合时间函数动态操作页面元素的相关技巧,非常简单实用,需要的朋友可以参考下2016-09-09使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
这篇文章主要介绍了使用JQuery快速实现Tab的AJAX动态载入(实例讲解)需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12
最新评论