新手如何开通小程序_jQuery完成三级联动效果

2021-01-12

jQuery实现三级联动效果       这篇文章主要为大家详细介绍了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="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) {
 (" 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,p凡科抠图) {
 if ($("#selF option:selected").text() == cs) {
 $.each(p凡科抠图, function (pp, xhs) {
 $("#selB").append(" option " + pp + " /option 
 $("#selB").change(function () {
 Init($("#selC"));
 $.each(p凡科抠图, function (pp,xhs) {
 if ($("#selB option:selected").text()==pp) {
 $.each(xhs.split(','), function () {
 $("#selC").append(" option " + this + " /option 
 /script 
 /head 
 body 
 div 
 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 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866