朋友项目需要实现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>
分享到：
相关推荐
在这个例子中，我们将探讨如何在 ASP.NET 平台上，利用 Ajax 实现一个三级联动的效果，该效果通常用于地区选择、商品分类等场景，以提高用户界面的交互性和用户体验。 在 Visual Studio 2003 中，虽然已经有些过时...
总结来说，这个“js和ajax实现三级联动”的示例是利用JavaScript和Ajax技术来创建一个动态的省市区选择功能，实现了用户在选择任一级别时，其他级别能够即时更新其内容，从而提供更流畅的交互体验。这个功能对于提升...
JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和互联网应用开发。在前端开发中，实现省份城市联动是一项常见的需求，它可以让用户在选择省份时，自动更新下拉框中的城市选项，提供更加友好的...
全国省市区地址下拉框二级、三级联动选择html例子，JS本地实现，无需网络就能使用，数据为国家省市区6位标准编码，二级联动为省、市的下拉框选择，三级联动为省、市、区的下拉框选择，效果请打开压缩包中的html页面...
Java 中二级联动的简单而实用的例子 Java 中的二级联动是指在 select 选择框中，选择某个选项后，根据选项的值来动态加载另外一个 select 选择框的选项，这种技术广泛应用于许多 web 应用程序中，以提高用户体验和...
在这个"Java实现Map集合二级联动示例中国省市例子"中，我们将探讨如何使用Map来构建一个二级联动的功能，常见于如中国省市选择的场景。这个场景通常出现在需要用户首先选择省份，然后根据所选省份展示对应的市的选择...
在JavaScript（JS）编程中，三级联动是一种常见的交互设计，常用于实现下拉菜单的联动效果，例如在选择国家、省份和城市时。这个场景在网页表单中尤为常见，可以提升用户在填写信息时的体验。在这个"JS三级联动代码...
在网页开发中，...通过以上步骤，我们可以利用JavaScript和jQuery结合XML数据实现省市三级联动的功能。这种技术在实际开发中有着广泛的应用，不仅限于网页，还可以应用于移动应用或其他需要动态数据更新的场景。
总结起来，"javascript实现省市区三级联动"主要涉及以下知识点： 1. HTML `<select>`元素和`onchange`事件。 2. JavaScript对象或数组用于存储地理数据。 3. 动态创建和修改DOM元素。 4. 使用JavaScript事件处理函数...
在这个例子中，我们可以看到，三级联动下拉菜单是通过三个表格实现的：thatchina_class_1、thatchina_class_2和thatchina_class_3。每个表格都有其对应的字段，例如class1_id、class1_name、class2_id、belongto_...
本资源“世界主要国家地区JS三级联动菜单”提供了一个实用的解决方案，旨在帮助开发者实现一个高效、易用的多级下拉菜单，特别适用于展示世界不同国家和地区的分类信息。 三级联动菜单是一种常见的交互设计，它由三...
在这个"js三级联动"的例子中，我们不依赖后台服务器或Ajax请求，而是通过预先加载的数据在客户端实现联动效果，这有助于提高页面的响应速度和用户体验。 首先，我们需要理解这个实现的核心概念： 1. **数据结构**...
本篇文章将详细介绍如何使用 JavaScript 实现二级菜单的联动效果。 首先，我们需要在 HTML 中设置基础的结构。二级菜单通常由一个主菜单（一级菜单）和一组子菜单（二级菜单）组成。以下是一个简单的 HTML 结构示例...
在网页开发中，"JS省市...总的来说，JS省市2级联动代码是一个利用JavaScript实现的动态交互功能，它提高了用户在选择地址时的便捷性和效率。通过理解和应用这些基本原理，开发者可以创建更智能、更用户友好的网页应用。
在这个例子中，我们看到的是一个基于JSP（JavaServer Pages）和JavaScript实现的三级联动下拉列表，涉及到的专业术语和知识点包括： 1. **JSP**：JavaServer Pages，是Java平台上的服务器端脚本语言，用于生成动态...
本示例中的“js实现省和学校二级联动”就是一个典型的JavaScript编程实例，它通过JavaScript语言来实现省份和学校之间的联动效果。这个功能通常在用户选择省份后，自动加载并显示该省份下的所有学校，为用户提供便捷...
标题 "DWR实现省市县三级联动小例子" 暗示了这个压缩包可能包含一个使用Direct Web Remoting (DWR) 技术构建的示例项目，该示例展示了如何实现在网页上进行省、市、县三级联动选择的功能。这种功能在很多中国的网站...
总结，实现世界主要国家地区的JS三级联动，我们需要以下步骤： 1. 创建一个数据结构存储所有国家、省份和城市信息。 2. 使用JavaScript事件监听器监听下拉菜单的`change`事件。 3. 根据用户的选择动态更新下拉菜单...
在这个例子中，我们可以看到一个使用 JavaScript 实现的三级联动下拉列表。 知识点1：JavaScript 数组 在上面的代码中，我们可以看到使用了两个数组，citys 和 countys。这些数组存储了省市区的信息，用于实现三级...