纯JS实现国家/省/市三级级联

2023-11-16

偷懒只加入了部分数据:


HTML模块:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
 <script src="js/pccs.js"  type="text/javascript"></script>
</head>

<body οnlοad="initialize()">
	
	<div>
		国家:<select name='ddlCountry' id='ddlCountry' style="width:100px;" οnchange="CountrySelChange()"></select>
		<br/><br/>
		省:<select name='ddlProvince' id='ddlProvince' style="width:100px;" οnchange="ProvinceSelChange()"></select>
		<br /><br />
		市:<select name='ddlCity' id='ddlCity' style="width:100px;"></select>
	</div>
</body>
</html>

JS模块:

<pre name="code" class="javascript">//获取select元素
var CountryObj = document.getElementById("ddlCountry");
var ProvinceObj = document.getElementById("ddlProvince");
var CityObj = document.getElementById("ddlCity");
var CountryStr = "请选择,Australia,Belgium,Cambodia,Canada,Switzerland,China,France,Germany,Hong Kong,India,Indonesia,Ireland,Israel,Italy,Japan,Korea,Kuwait,Lebanon,Luxembourg,Macao,Malaysia,Netherlands,New Zealand,Philippines,Sweden,Singapore,South Africa,Sweden,Taiwan,Thailand,United Kiongdom,USA,Vietnam";
//初始化地区下拉菜单
function initialize()
{	
	var CountryArray = CountryStr.split(',');
	for(var j=0; j<CountryArray.length; j++)
	{
		CountryObj.add(new Option(CountryArray[j],CountryArray[j]));
	}
	ProvinceDel();
}

//下拉列表改变事件
function CountrySelChange()
{
	ProvinceDel();
	ProvinceAdd();
}
//下拉列表改变事件
function ProvinceSelChange()
{
	CityDel();
	CityAdd();
}

//清空
function ProvinceDel()
{
	ProvinceObj.length = 0;
	ProvinceObj.add(new Option('请选择', '请选择'));
	CityDel();
}
//清空
function CityDel()
{
	CityObj.length = 0;
	CityObj.add(new Option('请选择', '请选择'));
}

//添加省
function ProvinceAdd()
{	
	var provinceList = [];
	provinceList[0]=(["China","北京市,天津市,上海市,重庆市,河北省,河南省,云南省,辽宁省,黑龙江省,湖南省,安徽省,山东省,新疆维吾尔,江苏省,浙江省,江西省,湖北省,广西壮族,甘肃省,山西省,内蒙古,陕西省,吉林省,福建省,贵州省,广东省,青海省,西藏,四川省,宁夏回族,海南省,台湾省,香港,澳门"]);
	provinceList[1]=(["",""]);
	provinceList.sort();
	for(var i=0; i<provinceList.length; i++)
	{
		if(CountryObj.value == provinceList[i][0])
		{
			var province = provinceList[i][1];
			AddOne(province, ProvinceObj);
		}
	}
}
		
//添加市
function CityAdd()
{	
	var PCList = [];
	PCList[0]=(["北京市","东城区,西城区,朝阳区,丰台区,石景山区,海淀区,门头沟区,房山区,通州区,顺义区,昌平区,大兴区,怀柔区,平谷区,密云县,延庆县"]);
	PCList[1]=(["天津市","和平区,河东区,河西区,南开区,河北区,红桥区,东丽区,西青区,津南区,北辰区,武清区,宝坻区,滨海新区,宁河县,静海县,蓟县"]);
	PCList[2]=(["上海市","黄浦区,徐汇区,长宁区,静安区,普陀区,闸北区,虹口区,杨浦区,闵行区,宝山区,嘉定区,浦东新区,金山区,松江区,青浦区,奉贤区,崇明县"]);
	PCList[3]=(["河北省",""]);
	PCList[4]=(["河南省",""]);
	PCList[5]=(["云南省",""]);
	PCList[6]=(["辽宁省",""]);
	PCList[7]=(["黑龙江省",""]);
	PCList[8]=(["",""]);
	PCList.sort();
	for(var i=0; i<PCList.length; i++)
	{
		if(ProvinceObj.value == PCList[i][0])
		{
			var City = PCList[i][1];
			AddOne(City, CityObj)
		}
	}
}
//添加实现
function AddOne(Str, Obj)
{
	if(Str == "")
		return;
	var strArray = Str.split(',');
	for(var j=0; j<strArray.length; j++)
	{
		Obj.add(new Option(strArray[j], strArray[j]))
	}
}


 
 


推荐在线测试: http://runjs.cn/code

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

纯JS实现国家/省/市三级级联 的相关文章

  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • 如何使用 Angular JS 单击时将 html 模板附加到 div/指令?

    我有这种情况
  • 如何适应特定子元素的宽度?

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 如何向 CSS 形状添加偏移轮廓?

    我在创建带有斜角边缘的块时遇到了一些问题 此外我需要一个斜角的边框并稍微偏离主块 问题是这个块可以根据屏幕响应 不知道具体的方法 希望大家帮忙 这就是我现在所做的 box display flex padding 20px height 2
  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis
  • Javascript 使事件点击和语音识别与多个按钮一起工作

    所以我正在使用 webkitSpeechRecognition 并且它工作得很好 但问题是我想同时在多个地方使用它 当我将它添加到页面上的另一个部分时 它无法正常工作 这是它自己工作的情况 var final transcript var
  • 如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框?

    我正在使用新的 Twitter Bootstrap 3 并尝试放置一个像这样的搜索框 如下 在顶部导航栏中 在 Bootstrap 2 中 可以这样完成
  • Angular UI select:从远程服务获取数据

    我正在使用角度用户界面选择 https github com angular ui ui select https github com angular ui ui select 我查看了演示的可用位置这个笨蛋 http plnkr co
  • 如何处理 Django 中的错误

    我想让我的 django 应用程序尽可能对用户友好 并且我想处理适当的错误并让它推出类似于 javascript 中的警报的错误消息 我想在没有上传文件时执行此操作 因此 当按下上传按钮并且尚未上传任何内容时 将会发出一条警报消息 我的看法
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • CSS 显示无不工作

    media screen and min width 900px and max width 1215px menu display none 这不起作用 div 仍然可见 但是 如果我将 div 更改为 div class menu 代替
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • 如何在画布上所有其他内容后面绘制图像? [复制]

    这个问题在这里已经有答案了 我有一块画布 我想用drawImage在画布上当前内容后面绘制图像 由于画布上已经有内容 我正在使用字面上的画布来创建包含图像的画布 因此我无法真正先绘制图像 所以我无法使用drawImage在我呈现其余内容之前
  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒

随机推荐

  • 毕业设计 opencv图像增强算法系统

    文章目录 0 简介 1 基于直方图均衡化的图像增强 2 基于拉普拉斯算子的图像增强 4 基于伽马变换的图像增强 软件实现效果 最后 0 简介 今天学长向大家分享一个毕业设计项目 毕业设计 opencv图像增强算法系统 项目运行效果 毕业设计
  • 8个不可不知的Mac OS X专用命令行工具

    本文转载至 https segmentfault com a 1190000000509514 OS X的终端下通用很多Unix的工具和脚本 如果从Linux迁移到OS X会发现很多熟悉的命令和脚本工具 其实并没有任何区别 但是OS X也提
  • Clamav杀毒软件源码分析笔记[十]

    Clamav杀毒软件源码分析笔记 十 刺猬 http blog csdn net littlehedgehog 客户端处理 服务端已经把主要的工作都已经处理的差不多了 剩下来也就是服务端等待客户端提出请求 然后根据客户端的请求做相应的工作
  • sql注入绕过技巧

    前言 今天斗胆来整理一下sql注入的各种绕过姿势 以后方便查阅 SQL注入的绕过技巧有很多 具体的绕过技巧需要看具体的环境 而且很多的绕过方法需要有一个实际的环境 最好是你在渗透测试的过程中遇到的环境 否则如果仅仅是自己凭空想 那显然是不靠
  • C语言项目——学生信息管理系统

    文章目录 学生信息管理系统 一 项目思路 1 模块化思想 2 流程图 二 功能框架 1 系统菜单 2 其他功能 三 分布实现 0 学生属性 系统属性 1 学生属性 2 系统属性 1 创建系统 2 绘制菜单 3 按键操作 4 录入信息 5 浏
  • 等精度测频原理--频率计

    等精度测频原理 频率计 本系统采用等精度测频的原理来测量频率 其原理如图2所示 图2 等精度测频原理图 图2中的门控信号是可预置的宽度为Tpr的一个脉冲 CNT1和CNT2是两个可控计数器 标准频率信号从CNT1的时钟输入端FS输入 其频率
  • 常见的几种矩阵分解方式

    项目github地址 bitcarmanlee easy algorithm interview and practice 欢迎大家star 留言 一起学习进步 1 三角分解 LU分解 矩阵的LU分解是将一个矩阵分解为一个下三角矩阵与上三角
  • H5浏览器播放RTMP直播流

  • Python编程快速上手

    题目1 编写一个名为collatz 的函数 它有一个名为number的参数 如果参数是偶数 那么collatz 就打印出number 2 如果number是奇数 collatz 就打印3 number 1 def collatz numbe
  • 面试题 ⑥

    1 Java常见的线程池有哪些 它们的使用场景 newSingleThreadExecutor 创建一个单线程的线程池 此线程池保证所有的执行顺序按照任务的提交顺序执行 FIFO 适合顺序处理文件日志等 newFixedThreadPool
  • easyUI datagrid中checkbox选中事件以及行点击事件,翻页之后还可以选中

    DataGrid其中与选择 勾选相关 DataGrid属性 singleSelect boolean 如果为true 则只允许选择一行 false ctrlSelect boolean 在启用多行选择的时候允许使用Ctrl键 鼠标点击的方式
  • MySQL主从复制(Master-Slave)实践

    转载自 https www cnblogs com gl developer p 6170423 html 参考 https blog csdn net lildkdkdkjf article details 10004663 MySQL数
  • Python的pickle模块详解(包括优缺点及和JSON的区别)

    文章目录 一 pickle是什么 1 pickle的优缺点 2 pickle和JSON的区别 3 pickle的应用总结 二 pickle的用法 1 pickle接口 2 pickle实例 结语 一 pickle是什么 在英语中 pickl
  • 批处理一键关闭危险端口(135 137 138 139 445)预防勒索病毒

    一键关闭危险端口 bat echo off color 1f title 关闭常见的危险端口 echo 正在开启Windows防火墙 echo netsh advfirewall set currentprofile state on gt
  • 备份BOM T-SQL

    转载请注明出处 联系我 t39q 163 com 本人热衷于数据库技术及算法的研究 志同道合之士 欢迎探讨 ALTER PROC dbo proc BOM VersionAutoUpgrade company NVARCHAR 20 Par
  • input type=file选择图片按钮样式修改与图片预览

    1 背景 通过上图我们可以看到input type file按钮的默认样式 非常不美观 如果要自定义该按钮的样式 要如何实现呢 2 方式1样式 input覆盖整个按钮区域 并且设置完全透明
  • 图显系统DRM ENCODER和CONNECTOR完全解析

    0 引言 DRM ENCODER 和 CONNECTOR 模块由图显外设抽象而来 从传统意义上来讲 ENCODER 包含外设控制器的功能 而 CONNECTOR 包含外设 PHY 或者显示器参数 但是这两部分又紧密关联 因此 软件 DRM
  • 大神之路-起始篇

    欢迎关注 WeiyiGeek 作者 设为 星标 每天带你 基础入门 到 进阶实践 再到 放弃学习 涉及 网络安全运维 应用开发 物联网IOT 学习路径 个人感悟 等知识 花开堪折直须折 莫待无花空折枝 文章目录 第 4 部分 计算机软件与算
  • linux socket 开源库,libsocket

    README for libsocket BUILDING libsocket If you want to install both libsocket and libsocket simply use this command mkdi
  • 纯JS实现国家/省/市三级级联

    偷懒只加入了部分数据 HTML模块 div 国家 div