<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>三级联动例子</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: "广东"},
{atcode: "20", typename: "湖南"},
{atcode: "30", typename: "陕西"}
];
var assessmentContents = [
{atcode: "10", acCode: "1001", acName: "深圳"},
{atcode: "10", acCode: "1002", acName: "珠海"},
{atcode: "20", acCode: "2001", acName: "长沙"},
{atcode: "20", acCode: "2002", acName: "湘潭"},
{atcode: "20", acCode: "2003", acName: "邵阳"},
{atcode: "30", acCode: "3002", acName: "西安"},
{atcode: "30", acCode: "3003", acName: "商洛"}
];
var assessmentStandards = [
{atcode: "10", acCode: "1001", asCode: "100101", atContent: "福田区"},
{atcode: "10", acCode: "1001", asCode: "100102", atContent: "南山区"},
{atcode: "10", acCode: "1002", asCode: "100201", atContent: "香洲区"},
{atcode: "10", acCode: "1002", asCode: "100202", atContent: "拱北区"},
{atcode: "20", acCode: "2001", asCode: "200101", atContent: "芙蓉区"},
{atcode: "20", acCode: "2001", asCode: "200102", atContent: "岳麓区"},
{atcode: "20", acCode: "2002", asCode: "200201", atContent: "雨湖区"},
{atcode: "20", acCode: "2002", asCode: "200202", atContent: "湘江区"},
{atcode: "20", acCode: "2003", asCode: "200301", atContent: "双清区"},
{atcode: "20", acCode: "2003", asCode: "200302", atContent: "大祥区"},
{atcode: "30", acCode: "3002", asCode: "300201", atContent: "雁塔区"},
{atcode: "30", acCode: "3003", asCode: "300302", atContent: "商州区"}
];
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) {
$("address").value = object.options[object.selectedIndex].text;
var list = filterList(assessmentContents, "atcode", object.value);
loadSelect("category2", list, "acCode", "acName");
}
function onCategory2Change(object) {
$("address").value = $("category1").options[$("category1").selectedIndex].text + object.options[object.selectedIndex].text;
var list = filterList(assessmentStandards, "acCode", object.value);
loadSelect("category3", list, "asCode", "atContent");
}
function onCategory3Change(object) {
$("address").value = $("category1").options[$("category1").selectedIndex].text + $("category2").options[$("category2").selectedIndex].text + object.options[object.selectedIndex].text;
//$("address").value = $("category1").options[$("category1").selectedIndex].text + $("category2").options[$("category2").selectedIndex].text + $("category3").options[$("category3").selectedIndex].text;
}
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>
<input id="address" type="text"></input>
</body>
</html>
运行结果：
相关推荐
在本文中，我们将深入探讨如何使用AngularJS实现三级级联下拉选择框。AngularJS，一个由Google维护的JavaScript框架，被广泛用于构建单页应用（SPA），它提供了丰富的功能来处理复杂的前端交互，包括数据绑定、依赖...
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
在本文中，我们将深入探讨如何在JSP（JavaServer Pages）中实现一个基于JavaScript的出生日期三级级联下拉列表。这种功能常用于用户注册、个人信息填写等场景，让用户能够方便地选择他们的出生年、月和日。 首先，...
在IT领域，动态实现下拉列表框的三级级联查询是一项常见的前端交互功能，它能够为用户提供更加便捷的导航和筛选体验。在这个场景中，我们使用JSP（JavaServer Pages）脚本语言来实现这一功能。JSP是Java平台上的...
网页表单级联下拉列表自动填写方法是指在网页表单中，多个下拉列表框之间存在关联关系，选择前一个下拉列表框的选项后，后一个下拉列表框才会出现相关的选项，这样可以实现自动填写省、市、县三级下拉列表框的功能。...
### JSP+JavaScript 实现二级级联下拉菜单的知识点解析 #### 一、概述 在Web开发领域，实现动态的交互式用户界面是提升用户体验的重要手段之一。本文档将详细解析如何通过JSP（JavaServer Pages）与JavaScript来...
在"uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip"的压缩包中，应该包含了实现这些功能的示例代码，包括HTML结构、样式以及JavaScript逻辑。开发者可以通过查看和运行这些代码来学习如何在uni-...
在多级级联下拉列表的实现中，jQuery主要负责DOM元素的选择、操作和事件绑定。 **二、多级级联下拉列表** 级联下拉列表是一种常见的前端交互形式，通常用于表示具有层次结构的数据，如国家-省份-城市的关系。当用户...
在网页开发中，"js+ajax实现三级级联" 是一种常见的交互设计，它主要用于下拉选择框（select）的联动效果。这种效果通常应用于地址选择、部门分类等场景，用户在选择第一级后，第二级和第三级的选项会根据前一级的...
在Web开发中，级联下拉列表框是一种常见的交互元素，它允许用户在选择一个选项后，根据所选选项更新另一个下拉列表框中的选项。本主题将详细讲解如何使用Direct Web Remoting (DWR)、Hibernate 和 Spring 框架来实现...
在这个“JSP+AJAX三级级联及更多级的实现”主题中，我们将深入探讨如何通过这两种技术构建一个能够实现多级联动下拉菜单的系统，这种功能常见于地址选择、部门结构展示等场景。 首先，JSP是Java的一种服务器端脚本...
从给定的文件信息来看，我们正在探讨的主题是“jquery3级级联”，这是一个涉及到JavaScript库JQuery在网页上实现三级下拉菜单级联选择功能的话题。以下是对这个主题的详细解析： ### 1. 什么是3级级联？ 3级级联指...
在实现三级级联下拉框时，当用户选择一级分类后，JavaScript中的showMenu函数会被触发，通过创建的XMLHttpRequest对象向后端发送异步请求。后端PHP脚本响应请求后，将结果返回给前端页面，并动态更新二级分类下拉框...
### jsp+ajax实现三级级联 在现代Web开发中，动态加载数据并根据用户的选择进行更新是非常常见的需求。例如，在电商网站上选择省份、城市和区县时，后两个选项会根据前一个选项的选择而变化。这种效果可以通过多种...
这种被称为“三级级联”的概念在Java Web开发中是一个常见需求，主要用于下拉列表联动选择，提升用户界面的交互性和数据输入的准确性。 在这个项目中，"Java三级级联，省份，市区，地区"意味着开发者正在创建一个...
在本文中，我们将深入探讨如何使用AngularJS实现地区三级级联功能，这通常涉及到省、市、区的联动选择。AngularJS是一个强大的JavaScript框架，它提供了丰富的功能来构建动态单页应用(SPA)。在这个场景中，我们使用...
全国城市三级级联是一种常见的前端数据展示方式，尤其在下拉选择框中广泛使用，用于构建省市区三级联动的效果。这种功能通常出现在地址选择、物流配送等场景中，让用户能够方便地选择到精确的地区信息。在这个场景中...
总的来说，这个实例展示了如何结合使用jQuery、JSP、JavaScript和CSS来实现一个功能完善的级联地区选择器，这在网页开发中非常实用，尤其是在需要用户输入地区信息的场景下。理解并掌握这种实现方式对于提升Web开发...
在网页开发中，级联下拉列表框是一种常见的交互设计，它允许用户在选择一个选项后，根据选择的结果动态更新下一个下拉列表框的内容。这种功能常见于地区选择、分类检索等场景。本项目利用jsp、ajax和mysql数据库技术...
在网页开发中，省市区三级级联是一种常见的交互设计，...通过学习和理解这些代码，你可以掌握如何在实际项目中实现省市区三级级联功能。这不仅锻炼了JavaScript编程能力，还对前端数据交互和用户体验设计有深入的理解。