基于javascript实现全国省市二级联动下拉选择菜单
作者:gyz418 发布时间:2023-09-14 06:08:52
标签:js,二级联动,下拉选择
本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考。具体如下:
效果图:
具体代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//好像不是这样子
var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"];
var arr_city = [
["请选择城市/地区"],
["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'],
['郑州市']
];
//函数:当省份中的option改变时,城市中的数据应该相应的改变
function select_change(index)
{
var city = document.form1.city;
//根据当前index确定city中要写入的二维数组是哪一个
city.length = 0;
city.length = arr_city[index].length;
for(var i=0;i<arr_city[index].length;i++)
{
//创建每一个option对象(option标记)
city.options[i].text = arr_city[index][i];
city.options[i].value = arr_city[index][i];
}
}
//函数:给province对象添加option对象,每个option的内容来自于arr_province
function init()
{
//获取province和city对象
var province = document.form1.province;
var city = document.form1.city;
//指定下拉列表的高度,准备写入几个option的标记(很重要)
province.length = arr_province.length; //这句必须有
//循环数组,将数组内容写入到province中去
for(var i=0;i<arr_province.length;i++)
{
//创建每一个option对象(option标记)
province.options[i].text = arr_province[i];
province.options[i].value = arr_province[i];
}
//指定省份当前的默认选中索引号
var index = 0;
province.selectedIndex = index;
//对象city的内容来自于province的选择
//我们默认指定一个option,一般是下标为0的那个
city.length = arr_city[index].length;
for(var j=0;j<arr_city[index].length;j++)
{
//创建每一个option对象(option标记)
city.options[j].text = arr_city[index][j];
city.options[j].value = arr_city[index][j];
}
}
</script>
</head>
<body onload="init()">
<form name="form1">
省份:<select name="province" onchange="select_change(this.selectedIndex)" style="width:130px;"></select>
城市:<select name="city"></select>
</form>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
0
投稿
猜你喜欢
- 在我们制作主页的过程中,用到表格的地方非常多,灵活运用表格技巧可以为我们的网页增色不少,这里我就详细介
- ClickHouse是近年来备受关注的开源列式数据库(DBMS),主要用于数据联机分析(OLAP)领域,于2016年开源。目前国内社区火热,
- 内容摘要:统计在线人数的方法很多,可以使用Application来统计在线人数,也可以使用IP来统计在线人数。各有优点。本文介绍了通过判断S
- 一、首先从SQLServer中Error讲起,SQL中错误处理有些怪辟 错误级别同是16但结果都不同。select *
- 用ASP生成XBM数字图片(可用来生成验证码)XBM图片是一个纯文本的文件,可以用ASP来自动生成。可以用它来使用网站登陆的验证码;我们用记
- 技巧问题 Mysql的远程连接出现"Lost connection to MySQL server during query&qu
- 判断访问是否来自搜索引擎的函数,有兴趣的可以试试! <% '检查当前用户是否是蜘蛛人 Function check(
- 近日,有朋友一直打听flash连结服务器相关的知识,搞得我忧心重重,重点是自己也忘记了,大部分Flash的相关开发都是两年前的事,而且fla
- 这最近在PJ的function库里看到的这个函数,感觉思路差了点,不过相对比较完美,只是闭合标签时的顺序问题,呵呵 修改一下数组arrTag
- 如何在线删除表或索引? <%Set conn1 = Server.CreateObject(&
- <%''调用例子'Dim int_RPP,int_Start,int_showNumberLink
- “/xxxxx”应用程序中的服务器错误。 -------------------------------------------------
- 如何使用数组来显示下拉菜单?可以这样,如下:Sub DoDropDown(Arr(), strSelName, 
- jupyter介绍jupyter的全称为Jupyter Notebook,之前一度被称为(IPython notebook),是一种交互式的
- 如果你有一字段dm记录了一个url,为了更好的优化模糊查询速度或统计速度,在数据表原有的结构上增加3个字段,分别为 `sdm`
- 一、'建立register.asp 代码如下:<%@ language=vbscript %>&nb
- ACCESS数据库在用的过程中,经常不断的进行删除和增加记录的操作,会出现以下问题:1、可能会使Update语句更新失败,明明一条记录存在,
- Semantics可翻译为语义的(学),它是Html/Xhtml是否真正符合标准的重要一环。Jorux在这和大家讨论一些自己的观点,如有不妥
- 随着网络技术的不断发展,网络应用已经渗透到人类社会的各个角落。作为网络世界的支撑点的网站,更是人们关注的热点:政府利用网站宣传自己的施政纲领
- Asp开发 联通CDMA以下是在开发wap中的随笔,其中一些对于“老鸟”来说,谈不上什么,希望对初学者有所帮助,大家有什么小技巧,欢迎顶上来