朋友项目需要实现3级联动，需要JS实现的，网上找的例子有些复杂，自己动手帮朋友写了一个简单的3级联动的例子，没有使用任何第三方JS库，相关数据使用JSON数组。
完整代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 3级联动例子 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="UTF-8" />
<meta http-equiv="expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta content="all" name="robots" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var assessmentTypes = [
{atcode: "10", typename: "typename1"},
{atcode: "20", typename: "typename2"},
{atcode: "30", typename: "typename3"}
];
var assessmentContents = [
{atcode: "10", acCode: "10", acName: "acName1"},
{atcode: "20", acCode: "20", acName: "acName2"},
{atcode: "20", acCode: "30", acName: "acName3"},
{atcode: "30", acCode: "40", acName: "acName4"},
{atcode: "30", acCode: "50", acName: "acName5"},
{atcode: "30", acCode: "60", acName: "acName6"}
];
var assessmentStandards = [
{atcode: "10", acCode: "10", asCode: "10", atContent: "atContent1"},
{atcode: "10", acCode: "10", asCode: "20", atContent: "atContent2"},
{atcode: "10", acCode: "10", asCode: "30", atContent: "atContent3"},
{atcode: "20", acCode: "20", asCode: "40", atContent: "atContent4"},
{atcode: "20", acCode: "20", asCode: "50", atContent: "atContent5"},
{atcode: "20", acCode: "30", asCode: "60", atContent: "atContent6"},
{atcode: "20", acCode: "30", asCode: "70", atContent: "atContent7"},
{atcode: "30", acCode: "40", asCode: "80", atContent: "atContent8"},
{atcode: "30", acCode: "40", asCode: "90", atContent: "atContent9"},
{atcode: "30", acCode: "50", asCode: "100", atContent: "atContent10"},
{atcode: "30", acCode: "60", asCode: "110", atContent: "atContent11"}
];
function loadSelect(id, list, valueField, textField) {
var html = "<option value='-1'>------请选择---</option>";
if(list!=null && list.length>0) {
for(var i=0, len=list.length; i<len; i++) {
html += "<option value='" + list[i][valueField] + "'>" + list[i][textField] + "</option>";
}
}
$(id).innerHTML=html;
}
function onload() {
loadSelect("category1", assessmentTypes, "atcode", "typename");
loadSelect("category2");
loadSelect("category3");
}
function filterList(dataList, valueField, value) {
var list = [];
if(dataList!=null && dataList.length>0) {
for(var i=0, len=dataList.length; i<len; i++) {
if(dataList[i][valueField]==value) {
list[list.length] = dataList[i];
}
}
}
return list;
}
function onCategory1Change(object) {
var list = filterList(assessmentContents, "atcode", object.value);
loadSelect("category2", list, "acCode", "acName");
loadSelect("category3");
}
function onCategory2Change(object) {
var list = filterList(assessmentStandards, "acCode", object.value);
loadSelect("category3", list, "asCode", "atContent");
}
function onCategory3Change(object) {
}
function $(id) {
return document.getElementById(id);
}
window.onload = onload;
//-->
</SCRIPT>
</head>
<body onload = "onload()">
<select id="category1" onchange="onCategory1Change(this)"></select>
<select id="category2" onchange="onCategory2Change(this)"></select>
<select id="category3" onchange="onCategory3Change(this)"></select>
</body>
</html>
分享到：
相关推荐
这是一款非常实用的3级联动js特效，不用数据库，所有的数据都放到一个js文件里面，使用超方便
1、无限制多级联动 2、支持选择状态保存，使用Cookie 3、支持初始值选定 4、JS添加下拉列表和选择项 内附省市县三级联动例子
dropList v1.0-无限级联动下拉框JavaScript类 1、无限制多级联动 2、支持选择状态保存，使用Cookie 3、支持初始值选定 4、同一页面中多个应用不会相互影响 包含一个省市县三级联动的例子
看到网上很多想用ajax的树的例子，很奇怪，明明...注：顺便下载了一个省市县的3级xml文件，作为ajax树联动展示的例子 这个例子还实现了选中父结点时，选中全部子结点； 取消一个子结点，同时取消全部级别的父结点。
自己写的第2个 ajax例子 3联动+无刷新分页(no altas) 无刷新分页 有点bug 只需要把 js/xmlhttp.js 里面的 的标签 里的属性 +一个 单引号 就行了 App_data下的my51aspx.mdf为Sql数据库文件，附加即可 数据库操作采用...
分页列表、树形、面包屑、三级联动、内容格式化。 4.2. 举几个简单模块的例子 4.2.1. 品牌管理 单表 分页、新增、删除、修改 4.2.2. 规格管理 2张表 分页、新增、删除、修改、显示优化（显示列表内容的一部分） ...
Echarts-demoEcharts例子，three.js例子一个Echarts三级联动的例子，和一个three.js3D图片展示的例子以及图片切换成不同的形状的动画。
在原有的基础上优化了实现，更换了更清晰的数据格式，更好的交互体验。 特点 真实的3D滚轮，效果更接近原生，秒杀其它大多数picker组件:upside-down_face: 更合理的用户交互 支持多级联动，选项动态更新 灵活的选项...
不限制级数 : 可以是2级、3级、4级等多级联动菜单 #浏览器支持 IE10+及各大主流浏览器(Chrome, FireFox, Safari, Opera)的最新的几个版本。 #使用方法 使用方法非常简单，您只需要3步: ##1.设置三个参数。 data-role...
城市省市二级联动选单 example/cityselect.html 直辖市的二级选单调整为市辖区辖县 城市省市三级联动选单 example/cityselect_3.html 调用json数据 城市省市列表 example/list.html 调用json数据 新增淘宝提取的地址...
SharpRewriter：javascript + xml技术利用#实现url重定向 采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较：面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行...
实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r($_ENV) 73 实例042 使用可变变量输出“I Like PHP!” 73 实例...
实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r($_ENV) 73 实例042 使用可变变量输出“I Like PHP!” 73 实例...