<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<FORM METHOD=POST ACTION="" name="form1">
<SELECT NAME="province" onChange="getCity()" id="province"></SELECT>
<SELECT NAME="city" id="city"></SELECT>
</FORM>
<script type="text/javascript">
var zNodes =[
{ pId:1, name:"北京",child:[{cId:10,cName:"北京00"},{cId:11,cName:"北京1"},{cId:12,cName:"北京02"},{cId:13,cName:"北京03"}]},
{ pId:2, name:"河北",child:[{cId:20,cName:"河北1"},{cId:21,cName:"北京1"},{cId:22,cName:"北京02"},{cId:23,cName:"北京03"}]},
];
var sltProvince=document.form1.province;
function init(){
for(var i=0;i<zNodes.length;i++)
{
var objOption=document.createElement("OPTION");
objOption.value=zNodes[i].pId;
objOption.text=zNodes[i].name;
document.getElementById("province").appendChild(objOption);
}
var i_objOption1=document.createElement("OPTION");
i_objOption1.value=zNodes[0].child[0].cId;
i_objOption1.text=zNodes[0].child[0].cName;
document.getElementById("city").appendChild(i_objOption1);
}
init();
function getCity(){
var sltCity=document.form1.city;
var j=sltProvince.selectedIndex;
document.getElementById("city").innerHTML="";
for(var m=0;m<zNodes[j].child.length;m++){
//alert(objOption1);
var objOption1=document.createElement("OPTION");
objOption1.value=zNodes[j].child[m].cId;
objOption1.text=zNodes[j].child[m].cName;
document.getElementById("city").appendChild(objOption1);
}
}
</script>
</body>
</html>
分享到：
相关推荐
本文主要介绍了HTML DOM操作中的级联下拉列表的创建和应用，包括DOM查找、表单验证以及节点的创建和操作。这些是前端开发中非常重要的基础知识点，每一个都是构建动态网页不可或缺的部分。 首先，DOM查找是前端开发...
1. 什么是级联列表？ 2. 级联列表有什么用？ 3. 怎么实现相应的操作？ 4. 两种方法实现对应省市的下拉操作 一、什么是级联？ 1.级联还指用来设计一对多关系。举个例子：一个表存放学生的信息:表A（姓名，性别，年龄...
对于刚刚上手的新人来说是一篇很好的文档 适合刚入门的程序员
html级联菜单,可以看看！
利用javascript+json实现级联查询
在本案例中，我们讨论的是使用JavaScript和HTML技术实现的级联菜单，且该菜单能够与数据库进行交互，动态地从数据库中读取内容。这种功能可以提升用户体验，使用户能够快速浏览和选择多层分类的信息。 首先，我们要...
"layui-级联下拉框-可配置开启多选-HTML源码"这个资源提供了一个使用这些技术实现的功能，即级联多选下拉框。级联下拉框是一种常见的UI组件，它允许用户在一个下拉框的选择基础上动态加载并显示另一个相关的下拉框，...
总结起来，"html+js实现地区三级联动下拉菜单"是一种常见的前端交互设计，它利用HTML的`<select>`元素和JavaScript的事件监听及DOM操作实现地区选择的动态更新。这个示例代码简洁高效，适用于各种Web项目，并且提供...
这个"纯JS+HTML写的checkBox Tree 级联选中"实例，解决了其他示例中可能存在的BUG，提供了一个稳定、好用的解决方案。 在该实现中，主要涉及以下几个关键知识点： 1. **HTML结构**： - 树形结构通常由`<ul>`和`...
标题中的“三级级联菜单（JS+HTML)”指的是在网页设计中使用JavaScript和HTML实现的具有三级结构的下拉菜单。这种菜单允许用户通过点击主菜单项来展开子菜单，进一步点击子菜单项可以展开更深层次的选项，提供了一种...
在压缩包中的"级联菜单（二级、三级）"可能包含HTML、CSS和JavaScript代码示例，供开发者参考学习。这些文件将详细展示如何构建和实现这样的级联菜单效果，包括必要的HTML结构、CSS样式规则和JavaScript逻辑。通过...
下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框
在级联地区选择中，JSP可能用于后端数据的处理和返回，例如获取省份和城市的列表数据，这些数据可以通过Ajax请求从服务器获取并填充到前端的HTML元素中。 JavaScript是网页开发中的客户端脚本语言，负责处理用户与...
本资源提供了一个“超漂亮的基于jquery的H5省市区县三级地区级联选择菜单”，它专为wap和HTML5页面设计，具有良好的视觉效果和出色的兼容性。 首先，我们要理解什么是jQuery。jQuery是一个快速、简洁的JavaScript库...
### JSP实现级联菜单详解 #### 一、概述 级联菜单是Web应用程序中常见的一种交互设计方式，尤其在需要展示多层级数据结构时，如省份-城市选择器等场景下非常实用。通过级联菜单，用户可以方便地根据上一级的选择来...
级联下拉框（Cascading Dropdown）是一种常见的前端交互设计，它允许用户在选择一个选项后，根据所选选项动态加载并显示下一个下拉框的内容。这种效果在多级分类、地区选择、产品配置等场景中十分常见。在本教程中，...
要创建一个多选级联选择器，你需要在HTML中定义一个元素作为选择器容器，并为其添加layui的class属性，如`layui-cascader`。接下来，通过layui的JS接口初始化这个选择器，设置相应的配置项。例如： ```html ...
WXML是小程序的结构层语言，类似于HTML，用于定义页面的结构。在城市级联组件中，我们需要创建一个多级选择的结构，通常使用`<picker>`组件。`<picker>`组件允许用户在一定范围内进行选择，并可以通过事件绑定来获取...
在Web开发中，级联菜单通常用HTML、CSS和JavaScript实现。HTML负责定义菜单结构，CSS控制样式，JavaScript处理交互逻辑。例如，可以使用`<ul>`和`<li>`标签创建一个多级的无序列表，然后通过CSS的`display`属性控制...
综上所述，jQuery实现级联下拉列表涉及HTML结构设计、数据管理、事件监听和DOM操作等多个方面，通过使用`$().related`这样的插件可以简化这个过程，提高开发效率。在压缩包中，可能包含了这个插件的源代码和其他示例...