简单的一个用javascript做的'省市区'三级联动效果

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>javascript简单三级联动效果</title><meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<script>var oProc=new Array("四川省","湖南省","广东省");//随意选择三个省,如需更多,添加便是var oCity=new Array();//创建一个数组,用以存放市选择项oCity[0]=new Array("成都市","绵阳市","达州市");oCity[1]=new Array("长沙市","常德市","湘潭市");oCity[2]=new Array("广州市","深圳市","珠海市");var oDist=new Array();//创建一个数组,用于存放市级以下的各个区县oDist[0]=new Array();//这是必须声明的一项,否则会报异常oDist[1]=new Array();oDist[2]=new Array();oDist[0][0]=new Array("武侯区","锦江区","金牛区");oDist[0][1]=new Array("梓潼县","安县","罗江县");oDist[0][2]=new Array("达县","通川县","宣汉县");oDist[1][0]=new Array("长沙区","开福区","芙蓉区");oDist[1][1]=new Array("武陵区","鼎城区","汉寿县");oDist[1][2]=new Array("湘潭县","雨湖区","岳塘区");oDist[2][0]=new Array("白云区","天河区","黄埔区");oDist[2][1]=new Array("罗湖区","宝安区","福田区");oDist[2][2]=new Array("香洲区","金湾区","斗门区");//加载完成时,执行function showLoad(){var oproc=document.getElementById("proc");for(var i=0;i<oProc.length;i++){var oOpt=document.createElement("option");var oTxt=document.createTextNode(oProc[i]);oOpt.appendChild(oTxt);oproc.appendChild(oOpt);}}//当“proc”发生change事件时,执行function showCity(){var oproc=document.getElementById("proc");var ocity=document.getElementById("city");var odist=document.getElementById("dist");if(oproc.value=="-1"){//判断,当未选择时。将市级,区级中的内容清空ocity.options.length=1;odist.options.length=1;}else{ocity.options.length=1;odist.options.length=1;var num=oproc.options.selectedIndex;for(var i=0;i<oCity[num-1].length;i++){//循环加入数据var oOpt=document.createElement("option");var oTxt=document.createTextNode(oCity[num-1][i]);oOpt.appendChild(oTxt);ocity.appendChild(oOpt);}}}//当“city”发生change事件时,执行function showDist(){var oproc=document.getElementById("proc");var ocity=document.getElementById("city");var odist=document.getElementById("dist");if(ocity.value=="-1"){//判断,当未选择时。将区级中的内容清空odist.options.length=1;}else{odist.options.length=1;var numPro=oproc.options.selectedIndex;var numCity=ocity.options.selectedIndex;for(var i=0;i<oDist[numPro-1][numCity-1].length;i++){var oOpt=document.createElement("option");//创建一个option元素节点var oTxt=document.createTextNode(oDist[numPro-1][numCity-1][i]);//创建一个文本节点oOpt.appendChild(oTxt);//将文本节点加入到oOpt元素节点中odist.appendChild(oOpt);//将oOpt元素节点添加到odist中}}}
</script>
<body onload="showLoad()"><!-- 页面加载完成时,初始化省选择项 -->
<div>请选择地区:<select id="proc" onchange="showCity()"><option value="-1">--请选择省--</option></select><select id="city" onchange="showDist()" ><option value="-1">--请选择市--</option></select><select id="dist"><option value="-1">--请选择区--</option></select>
</div>
</body>
</html>

        其实要真正做上一个‘’省市区级‘’的三级联动,所需的数据还多,只需向数组中添加数据就OK了。

转载于:https://my.oschina.net/u/1443572/blog/221389

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264956.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

共享两个做项目最常用功能操作的封装类

(转载http://www.seaskyer.net/Index/Catalog12/223.html&#xff09;共享两个做项目最常用功能操作的封装类一&#xff0e; 显示消息对话框类 做项目时总免不了要弹出对话框&#xff0c;或提示用户&#xff0c;或做用户确认。像WinForm下的MessageBox一样很方便&#xff0c;但…

线程与线程同步

目录线程概述线程概念并发和并行线程ID创建线程终止线程回收线程取消线程取消一个线程取消状态以及类型取消点线程可取消性的检测分离线程注册线程清理处理函数线程属性线程栈属性分离状态属性线程安全线程栈可重入函数线程安全函数一次性初始化线程特有数据线程局部存储更多细…

《程序是怎样跑起来的》第一章有感

在看完《程序是怎样跑起来的》第一章后&#xff0c;我开始明白程序是怎么运行的&#xff0c;该书介绍了程序是什么、由什么组成的以及是内存的机制。读完这本书的第一章后&#xff0c;我知道程序是指令与数据的组合。不过在刚学习的时候&#xff0c;我只是按照书介绍说知&#…

CAS证书分析(2)

CAS的核心就是其Ticket&#xff0c;及其在Ticket之上的一系列处理操作。CAS的主要票据有TGT、ST、PGT、PGTIOU、PT&#xff0c;其中TGT、ST是CAS1.0协议中就有的票据&#xff0c;PGT、PGTIOU、PT是CAS2.0协议中有的票据。一 名词解释TGT&#xff08;Ticket Grangting Ticket&am…

Java Web 之Token+Cookie+Session

发展史&#xff1a; 1. 早期的WEB基本上就是文档的浏览而已&#xff0c;服务器不需要记录谁在某个时间都浏览了什么文档&#xff0c;每次请求都是全新的HTTP协议。 2. 随着交互式WEB应用的兴起&#xff0c;例如在线购物网站&#xff0c;需要登录的网站等&#xff0c;则需要对会…

Google Logos

All Googles logos.... 转载于:https://www.cnblogs.com/WuCountry/archive/2006/01/20/320689.html

CC254X 蓝牙博文收集

【BLE】CC2541之添加特征值 【BLE】CC2541之发现多个特征值句柄 IoT产品之蓝牙设计 BLE-CC2541 BLE-CC2640

〈转贴〉如何解决 Windows XP 中的硬件和软件驱动程序问题

如何解决 Windows XP 中的硬件和软件驱动程序问题 察看本文应用于的产品文章编号:322205最后修改:2004年3月25日修订:1.0本页 症状原因解决方案 检查第三方软件或驱动程序 检查新硬件这篇文章中的信息适用于:症状 在安装新硬件设备或新软件后&#xff0c;您的计算机可能自动开始…

断点续传与差分升级

断点续传的原理 基于STM32单片机的差分升级(增量升级)算法 OTA 差分升级 云端一体化差分升级&#xff0c;AliOS Things物联网升级“利器” 详解STM32在线IAP升级 单片机差分升级算法(STM32,M0,M3,M4等芯片都适用) AliOS Things 3.0 开发&#xff1a;OTA之差分升级快速上手…

MYSQL配置关键

2019独角兽企业重金招聘Python工程师标准>>> 在启动管理init.d里关于mysql的命令有 sudo /etc/init.d/mysql start|stop|restart|reload|force-reload|status sudo apt-get install mysql-server GRANT ALL PRIVILEGES ON *.* TO rootlocalhost IDENTIFIED BY &quo…

百度正式发布PaddlePaddle深度强化学习框架PARL

去年&#xff0c;斯坦福大学神经生物实验室与 EPFL 联合举办了一场强化学习赛事——人工智能假肢挑战赛&#xff08;AI for Prosthetics Challenge&#xff09;&#xff0c;希望将强化学习应用到人体腿部骨骼仿真模拟模型的训练。 经过激烈的角逐&#xff0c;最终来自百度大脑的…

关于lvalue and rvalue

2019独角兽企业重金招聘Python工程师标准>>> lvalue &#xff1a;An object is a region of storage that can be examined and stored into.An lvalue does not necessarily permit modification of the object it designates&#xff1a; eg An array type An inc…

[转载]全面解读软件版本的标志

软件名称后面经常有一些英文和数字&#xff0c;如&#xff1a;QQ 2003 Beta&#xff0c;这些都是软件的版本标志&#xff0c;通过它&#xff0c;我们可以对软件的类型有所了解&#xff1a;Beta(β)&#xff1a;测试版&#xff0c;为正式版本推出之前发布&#xff0c;可能存在一…

gitlab 使用教程

视频教程&#xff1a;叮&#xff5e;&#xff0c;你收到一份最全的gitlab使用说明 地址&#xff1a;https://www.bilibili.com/video/BV11E411x7Uv?spm_id_from333.337.search-card.all.click 目录简介1、注册、登录2、创建项目3、添加项目成员4、分支权限设置5、下载安装git6…

mssql 分页

为什么80%的码农都做不了架构师&#xff1f;>>> http://www.cnblogs.com/ddlink/archive/2013/03/30/2991007.html 分页问题修正 http://blog.csdn.net/wangkadm/article/details/12708005 转载于:https://my.oschina.net/macleo/blog/223782

今天体育课受伤

中午轮滑体育课&#xff0c;由于技术不到家&#xff08;基本上还不会&#xff09;&#xff0c;一不小心就扭下去了&#xff0c;虽然从开始下倒到坐在地上不到1秒的时间&#xff0c;不过那一瞬间的记忆却特别的漫长&#xff1a; 先是向左倒&#xff0c;膝关节处感觉到了咔嚓的两…

日常收录

我于昨晚去世&#xff0c;去时心如止水。 我于今早重生&#xff0c;来时心怀暖意转载于:https://www.cnblogs.com/joker331/p/10302026.html

WiFi网络编程(带OTA功能)

参考&#xff1a;WiFi网络编程&#xff08;上&#xff09; 地址&#xff1a;https://www.bilibili.com/video/BV1VV411b75h/?spm_id_from333.788.recommend_more_video.0 参考&#xff1a;WiFi网络编程&#xff08;下&#xff09; 地址&#xff1a;https://www.bilibili.com/v…

OSAL操作系统分析(添加自定义任务)

目录事件驱动型OSAL操作系统原理分析OSAL消息收发过程向OSAL系统添加自定义任务事件驱动型OSAL操作系统原理分析 任务就是一个函数&#xff0c;每一个任务都要有一个函数&#xff0c;形成函数列表&#xff08;函数指针数组&#xff09; 以上就是任务处理函数&#xff0c;都是任…

自定义控件学习,优秀网站推荐

http://chs.gotdotnet.com/quickstart/aspplus/http://www.codeproject.com/转载于:https://www.cnblogs.com/wulixuan/archive/2006/04/02/364745.html