`
一湖碧波
  • 浏览: 55060 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

简单二级级联菜单的实现

    博客分类:
  • Ajax
 
阅读更多

级联下拉菜单就是从一个下拉菜单中选中一项后,相应的另一个下拉菜单的内容会随之改变。

 

代码一:使用函数createProvince()加载第一列表框中的值,onchange属性加载相应的第二个列表框中的值

<html> 
<head> 
  <title> new document </title> 
<script language="javascript"> 
  function createProvince(){ 
      var provinces = ['--请选择省份--','北京市', '福建省', '湖北省'];     //所有省份的数组 
    var province=document.myform.province; 	//获取文档中省份这个列表框元素对象 
    for(var i = 0; i < provinces.length; i++){ 
        province.options.add(new Option(provinces[i], provinces[i]));     //往省份的选项组中添加选项 
	} 
  } 

  function createcity(){ 
	var citylist = new Array(); 
	citylist['--请选择省份--'] = ['--请选择城市--']; 
    citylist['北京市'] = ['东城区', '西城区', '海淀区', '朝阳区', '大兴区', '昌平区', '怀柔']; 
	citylist['福建省'] = ['福州市', '厦门市', '泉州市', '龙岩市', '三明市']; 
    citylist['湖北省'] = ['武汉', '宜昌', '襄樊', '黄石', '黄冈', '十堰']; 
	//获得选中的省份值 
	var selectedProv=document.myform.province.value; 
	var cityOption; 
	//清空城市列表框中原来的所有选项 
	document.myform.city.options.length=0;
	//添加对应省份的所有城市 
	for (var city = 0; city < citylist[selectedProv].length; city++) { 
		cityOption = new Option(citylist[selectedProv][city], citylist[selectedProv][city]);         //构造选项 
		document.myform.city.options.add(cityOption); 
     } 
  } 
</script> 
</head> 

<body onload="createProvince()"> 
<form name="myform" > 
  <select name="province" id="province" onchange="createcity()"> 
  </select> 
  <select name="city" id="city"> 
      <option>--请选择城市--</option> 
  </select> 
</form> 
</body> 
</html> 

 代码2.直接将值写入第一个列表框,用函数createcity()加载相应的第二个列表框中的值

<html> 
<head> 
  <title> 级联菜单测试2 </title> 
<script language="javascript"> 
  function createcity(){ 
	var citylist = new Array(); 
	citylist['--请选择省份--'] = ['--请选择城市--']; 
    citylist['北京市'] = ['东城区', '西城区', '海淀区', '朝阳区', '大兴区', '昌平区', '怀柔']; 
	citylist['福建省'] = ['福州市', '厦门市', '泉州市', '龙岩市', '三明市']; 
    citylist['湖北省'] = ['武汉', '宜昌', '襄樊', '黄石', '黄冈', '十堰']; 
	//获得选中的省份值 
	var selectedProv=document.myform.province.value;   //value值,只能是option中的value属性值,与<option></option>中的值没有关系,其只作为一个文本内容来显示,而不作为有效的参数。
	var cityOption; 
	//清空城市列表框中原来的所有选项 
	document.myform.city.options.length=0;
	//添加对应省份的所有城市 
	for (var city = 0; city < citylist[selectedProv].length; city++) { 
		cityOption = new Option(citylist[selectedProv][city], citylist[selectedProv][city]);         //构造选项 
		document.myform.city.options.add(cityOption);
     } 
  } 
</script> 
</head> 

<body onload="createProvince()"> 
<form name="myform" > 
  <select name="province" id="province" onchange="createcity()"> 
    <option value="--请选择省份--">--请选择省份--</option>
	<option value="北京市">北京市</option>
	<option value="福建省">福建省</option>
	<option value="湖北省">湖北省</option>
  </select> 
  <select name="city" id="city"> 
      <option>--请选择城市--</option> 
  </select> 
</form> 
</body> 
</html> 

 

通过以上的对比可以发现,<option value=“value”></option>标签中的文本只是作为文本显示,而有效的参数值是value属性的值。

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    基于springboot+vue的体育馆管理系统的设计与实现(Java毕业设计,附源码,部署教程).zip

    该项目包含完整的前后端代码、数据库脚本和相关工具,简单部署即可运行。功能完善、界面美观、操作简单,具有很高的实际应用价值,非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试,确保可运行!下载后即可快速部署和使用。 1 适用场景: 毕业设计 期末大作业 课程设计 2 项目特点: 代码完整:详细代码注释,适合新手学习和使用 功能强大:涵盖常见的核心功能,满足大部分课程设计需求 部署简单:有基础的人,只需按照教程操作,轻松完成本地或服务器部署 高质量代码:经过严格测试,确保无错误,稳定运行 3 技术栈和工具 前端:HTML + Vue.js 后端框架:Spring Boot 开发环境:IntelliJ IDEA 数据库:MySQL(建议使用 5.7 版本,更稳定) 数据库可视化工具:Navicat 部署环境:Tomcat(推荐 7.x 或 8.x 版本),Maven

    二叉树的创建,打印,交换左右子树,层次遍历,先中后遍历,计算树的高度和叶子节点个数

    输入格式为:A B # # C # #,使用根左右的输入方式,所有没有孩子节点的地方都用#代表空

    鸿蒙操作系统接入智能卡读写器SDK范例

    如何通过智能卡读写器SDK接入鸿蒙操作系统?通过智能卡读写器提供的SDK范例可以将智能卡读写器接入在运行鸿蒙操作系统的智能终端设备上。

    【天线】基于matlab时域差分FDTD方法喇叭天线仿真(绘制电场方向图)【含Matlab源码 9703期】.zip

    Matlab领域上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    QT 下拉菜单设置参数 起始端口和结束端口

    QT 下拉菜单设置参数 起始端口和结束端口

    基于springboot+vue的大学生就业招聘系统的设计与实现(Java毕业设计,附源码,部署教程).zip

    该项目包含完整的前后端代码、数据库脚本和相关工具,简单部署即可运行。功能完善、界面美观、操作简单,具有很高的实际应用价值,非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试,确保可运行!下载后即可快速部署和使用。 1 适用场景: 毕业设计 期末大作业 课程设计 2 项目特点: 代码完整:详细代码注释,适合新手学习和使用 功能强大:涵盖常见的核心功能,满足大部分课程设计需求 部署简单:有基础的人,只需按照教程操作,轻松完成本地或服务器部署 高质量代码:经过严格测试,确保无错误,稳定运行 3 技术栈和工具 前端:HTML + Vue.js 后端框架:Spring Boot 开发环境:IntelliJ IDEA 数据库:MySQL(建议使用 5.7 版本,更稳定) 数据库可视化工具:Navicat 部署环境:Tomcat(推荐 7.x 或 8.x 版本),Maven

    java学生学籍管理系统设计与实现(源代码+论文+开题报告+外文翻译+答辩PPT)

    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。管理信息系统是一个不断发展的新型学科,任何一个单位要生存要发展,要高效率地把内部活动有机地组织起来,就必须建立与自身特点相适应的管理信息系统。 本文采用JSP和MS SQL-Server等软件为开发工具,以Windows XP(或Windows 2000)为开发平台,设计出一个学籍管理信息系统,对学生的信息、课程、成绩进行统一管理,便于查询、修改和删除。涉及到的主要内容有:体系结构规划、设计平台的搭建以及系统的设计。主要实现的功能模块有管理系统的功能介绍子系统、新生入学子系统、学生成绩管理子系统、在校学生管理子系统、离校学生管理子系统、各种信息查询子系统以及系统维护子系统。 该系统功能完善,可使高校的学籍管理系统从纯手工中解脱出来,实现高校学籍管理系统自动化、规范化、合理化、科学化,其实用性强,用户界面友好,有助于加快高校的信息传递和智能建设,并为高校整体实现信息化管理体系作好铺垫。。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    基于HTML、JavaScript、CSS的PublicCMS官网2019版响应式静态化设计源码

    该项目为PublicCMS官网2019版的响应式静态化设计源码,采用HTML、JavaScript和CSS技术,包含208个文件,涵盖63个HTML文件、50个JavaScript文件、25个JSON文件、25个PNG图片文件等多种类型,适用于全站静态化模板,支持响应式布局。

    【数据驱动】基于matlab系统识别工具箱实时数据驱动控制【含Matlab源码 10938期】.zip

    Matlab领域上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    win32汇编环境,怎么进行加法运算的

    win32汇编环境,怎么进行加法运算的

    深度学习中注意力机制解析及其Python实现-提高长序列处理能力的技术方案

    内容概要:本文对深度学习领域的注意力机制进行了全面介绍,旨在阐述该技术如何优化长序列处理中的信息筛选。首先,解释了引入注意力机制的原因,指出传统模型在处理长序列任务中存在的不足。然后,分类介绍了软注意力、硬注意力及自注意力三类机制的特点,重点探讨了基于Transformers架构的自注意力机制的作用和意义。接着,描述了注意力机制的具体操作流程:包括打分、加权以及输出组合等阶段。最后,给出了一段使用Python和NumPy构建简单自注意力模型的代码实例。 适用人群:希望深入了解自然语言处理或者机器翻译系统背后原理的研究者和技术开发者。 使用场景及目标:适用于需要解决文本或者其他线性序列中远距离元素间关系的学习项目,例如语音识别、语义搜索推荐等。 其他说明:提供的Python代码可以帮助初学者直观地理解整个过程的工作方式,尽管它只是实现了最基础的功能。

    (全新整理)1980-2023年中国就业数据2.0(全国、省、地级市)

    1、资源内容地址:https://blog.csdn.net/2301_79696294/article/details/144633303 2、数据特点:今年全新,手工精心整理,放心引用,数据来自权威,且标注《数据来源》,相对于其他人的控制变量数据准确很多,适合写论文做实证用 ,不会出现数据造假问题 3、适用对象:大学生,本科生,研究生小白可用,容易上手!!! 4、课程引用: 经济学,地理学,城市规划与城市研究,公共政策与管理,社会学,商业与管理

    【模型+参考文献】事件触发模型 基于倒立摆matlab仿真 模型为状态空间形式 事件触发机制可自行调节参数

    【模型+参考文献】事件触发模型 基于倒立摆matlab仿真 模型为状态空间形式 事件触发机制可自行调节参数

    最新版本的EVE华三路由器镜像

    h3cvsr1k-7.1.064-R1340P19 可用于EVE-NG,Pnetlab等模拟器

    SC2210数字CMOS图像传感器数据手册:技术特性、配置指南及应用场景

    内容概要:本文档详尽介绍了SC2210这款高性能CMOS图像传感器的技术细节及其应用场景。内容涵盖了SC2210的核心技术参数,如高分辨率(1920H x 1080V)、多种输出接口(MIPI、DVP、LVDS)、宽动态模式、高光敏感度、多传感器同步等功能。同时文档还涉及了初始化步骤、配置接口(I2C总线配置)、寄存器映射等重要信息,旨在帮助工程师深入了解传感器的工作机制和实际操作方法。 适合人群:适用于从事嵌入式视觉系统的硬件工程师和软件开发者。 使用场景及目标:本手册主要用于帮助开发人员设计基于SC2210传感器的产品,如安防监控、网络摄像头、移动设备相机等领域。通过对手册的学习能够理解和配置该传感器的各项功能以满足具体项目的需求。 其他说明:手册详细描述了SC2210的操作流程,包括上电时序、初始化设置、帧率调节等。它还讨论了不同应用场景下的性能优化技巧,如HDR合成、AEC/AGC自动控制等,使得开发者可以根据实际情况灵活运用这些功能。

    C语言程序设计(第5版)习题解答-第4章 原创代码

    C语言程序设计(第5版)习题解答-第4章 原创代码

    MTPA数值求解两种方法

    MTPA数值求解两种方法

    花生缺陷识别,可识别坏的,有虫子,霉变,萎缩,好的,7245张图片,支持pasical voc xml格式的标注,准确识别率在94.3%以上

    花生缺陷识别,可识别坏的,有虫子,霉变,萎缩,好的,7245张图片,支持pasical voc xml格式的标注,准确识别率在94.3%以上 花生缺陷识别,可识别坏的,有虫子,霉变,萎缩,好的,7245张图片,支持yolo,pasical voc xml,coco json格式的标注,准确识别率在94.3%以上 详情查看 https://backend.blog.csdn.net/article/details/144984596

    一个Qt多线程实现进度条示例.zip

    qt 一个Qt多线程实现进度条示例.zip 一个Qt多线程实现进度条示例.zip

    基于springboot+vue的大学生入学审核系统的设计与实现(Java毕业设计,附源码,部署教程).zip

    该项目包含完整的前后端代码、数据库脚本和相关工具,简单部署即可运行。功能完善、界面美观、操作简单,具有很高的实际应用价值,非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试,确保可运行!下载后即可快速部署和使用。 1 适用场景: 毕业设计 期末大作业 课程设计 2 项目特点: 代码完整:详细代码注释,适合新手学习和使用 功能强大:涵盖常见的核心功能,满足大部分课程设计需求 部署简单:有基础的人,只需按照教程操作,轻松完成本地或服务器部署 高质量代码:经过严格测试,确保无错误,稳定运行 3 技术栈和工具 前端:HTML + Vue.js 后端框架:Spring Boot 开发环境:IntelliJ IDEA 数据库:MySQL(建议使用 5.7 版本,更稳定) 数据库可视化工具:Navicat 部署环境:Tomcat(推荐 7.x 或 8.x 版本),Maven

Global site tag (gtag.js) - Google Analytics