JavaScript实现简单省市联动
作者:莎蛋蛋的盖世英雄啊 发布时间:2024-04-16 09:53:44
标签:js,省市联动
本文实例为大家分享了JavaScript实现简单省市联动的具体代码,供大家参考,具体内容如下
步骤
* 创建一个页面,有两个下拉选择框
* 在第一个下拉框里面有一个事件 :改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
* 创建一个二维数组,存储数据
* 每个数组中第一个元素是国家名称,后面的元素是国家里面的城市
*
1、遍历二维数组
2、得到也是一个数组(国家对应关系)
3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同,获取到第一个值后面的元素
5、得到city的select
6、添加过去(使用)appendChild方法
- 创建option(三步)
/*
由于每次都要向city里面添加option
第二次添加,会追加。
* 每次添加之前,判断一下city里面是否有option,如果有,删除
*/
代码如下:
<html >
<head>
<title>省市联动</title>
<style type = "text/css">
</style>
</head>
<body>
<select id="countyid" onchange="add1(this.value)">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="英国">英国</option>
<option value="日本">日本</option>
</select>
<select id="cityid" >
</select>
</body>
<script type="text/javascript">
var arr = new Array(4);
arr[0]=["中国","北京","上海","深圳","杭州"];
arr[1]=["美国","华盛顿","纽约","底特律","芝加哥"];
arr[2]=["英国","伦敦","伯明翰","利兹","利物浦"];
arr[3]=["日本","东京","大阪","北海道","长崎"];
/*
步骤:
1.遍历二维数组
2.得到一个数组-国家对应关系
3.用数组中第一个值与传递过来的值作比较
4.如果相同,获取到第一个值后面的元素
5.得到city的select
6.添加过去-appendChild方法
-创建option(三步)
由于每次都要向city里面添加option
第二次添加,会追加。
* 每次添加之前,判断一下city里面是否有option,如果有,删除
*/
function add1(val){
//得到city里面的select
var city1 = document.getElementById("cityid");
var ops = city1.getElementsByTagName("option");
for(var m=0;m<ops.length;m++){
var op = ops[m];
city1.removeChild(op);
m--;
}
for(var i=0;i<arr.length;i++){
arr1=arr[i];
var firstValue = arr1[0];
if (firstValue == val)
{
//创建option
for(var j=1;j<arr1.length;j++){
var value1 = arr1[j];
var option1=document.createElement("option");
var text1 = document.createTextNode(value1);
option1.appendChild(text1);
city1.appendChild(option1);
}
}
}
}
</script>
</html>
效果图演示:
来源:https://blog.csdn.net/srnmwj99/article/details/120681082
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 作为六大python可视化库,基本上学会都是可以通吃任何领域的存在,本章要给大家介绍的Altair就是其中之一的可视化库,能够将数据转化为非
- 网页的圆角处理,其实最开始的九宫格的表格处理是挺方便的,只是现在都不用表格布局了,自然就被非法取缔了。呵呵。微软的有VML画圆角,由于只是它
- 如题,我们直接使用numpy#!D:/workplace/python# -*- coding: utf-8 -*-# @File : nu
- 先给大家介绍下python制作定时发送信息脚本,内容如下所示:文章中提到的菜单是右下角这个需求我们需要做到打开微信获取输入框焦点及输入思路1
- 说明相应的学习视频见链接,本文只对重点进行总结。多进程重点(只要看下面代码的main函数即可)1.创建2.如何开守护进程3.多进程,开销大,
- 自从python2.2提供了yield关键字之后,python的生成器的很大一部分用途就是可以用来构建协同程序,能够将函数挂起返回中间值并能
- 一、准备工作1.1 Python安装包的下载(说明:python版本可根据自己需求更换)官网下载:https://www.python.or
- 本文实例讲述了python基于右递归解决八皇后问题的方法。分享给大家供大家参考。具体分析如下:凡是线性回溯都可以归结为右递归的形式,也即是二
- Tornado 4.0 已经发布了很长一段时间了, 新版本广泛的应用了协程(Future)特性. 我们目前已经将 Tornado 升级到最新
- 一、我们对XML的读取进行一波演示import xml.dom.minidom#负责解析xml文件的包from xml.dom.minido
- 安装pdfminer 库windows 下安装pdfminer3kpip install pdfminer3kLiunx 下安装pdfmin
- 在上两篇文章(MySQL备份与恢复之冷备,MySQL备份与恢复之真
- ADO.NET 连接到 SQL Server SQL Server .NET Framework 数据提供程序支持类似于 OLE DB (A
- 需求:根据医保中心的文档和提供的dll动态库调用相关接口下载医保中心的账单。文档:对调用dll动态库的描述,调用哪个dll文件,同时了解清楚
- 首先贴一张验证码上来做案例:第一步先通过二值化处理把干扰线去掉:from PIL import Image# 二值化处理def two_va
- 引言在Scrapy中,在很多种情况下,需要一层层地进行爬取网页数据,就是基于url爬取网页,然后在从网页中提取url,继续爬取,循环往复。本
- 微信网页授权认证根据微信官方文档,网页授权需要四个步骤, - 用户同意授权-获取code - 通过code 获取网页授权access_tok
- 如下所示:def resize(src, dsize, dst=None, fx=None, fy=None, interpolation=
- jemalloc源于Jason Evans 2006年在BSDcan conference发表的论文:《A Scalable Concurr
- 本文实例为大家分享了python实现五子棋游戏的具体代码,供大家参考,具体内容如下先上代码 #调用pygame库import py