最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery实现三级联动效果
时间：2022-06-25 17:08:16 编辑：袖梨 来源：一聚教程网
| 代码如下 | 复制代码 |
body { font-size:13px;text-align:center; } div { width:400px;border:1px solid #000000; background-color:#f5e8e8;margin:100px 300px; padding:10px; }
$(function () { function Init(node) { return node.html(""); } //多维数组做数据来源 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(""); }) //一级变动 $("#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(""); }); $("#selB").change(function () { Init($("#selC")); $.each(pps, function (pp,xhs) { if ($("#selB option:selected").text()==pp) { $.each(xhs.split(','), function () { $("#selC").append(""); }) } }) }) } }) })
})
企业：
产品：
嗯嗯：
| |
相关文章
- 纸嫁衣8什么时候出-上线时间介绍 08-14
- 新月同行预抽卡选什么-新月同行预抽卡角色选择推荐 08-14
- 新月同行怎么预约-新月同行预约方法一览 08-14
- 绝区零仙人掌花的邀约其二小卡格车在哪-绝区零仙人掌花的邀约其二小卡格车位置一览 08-14
- 新月同行什么时候上线-新月同行上线时间介绍 08-14
- 黑神话悟空像素版三口钟在哪儿-黑神话悟空像素版三口钟位置一览 08-14