javascript中的省市级联效果
学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧。
<head runat="server">
<title>省市级联效果</title>
<script type="text/javascript">
var cityList = [{ "province": "四川省", "city": ["成都", "内江", "绵阳", "眉山", "自贡"] },
{ "province": "山东省", "city": ["济南", "青岛", "德州", "淄博", "泰安", "菏泽", "临沂"] },
{ "province": "浙江省", "city": ["杭州", "金华", "绍兴", "温州", "衢州"] },
{ "province": "海南省", "city": ["海口", "三亚", "儋州", "东方", "五指山"] }, ]; window.onload = function () {
var province = document.getElementById("province");
//绑定事件
province.onchange = selectCity;
}; function selectCity() {
//城市
var city = document.getElementById("city");
//先清空数据
if (city != null) {
city.options.length = 0;
} //省份
var province = document.getElementById("province");
//获取选中省份的索引
var provinceSelectedIndex = province.selectedIndex;
//获取选中省份的项
var provinceSelectedOption = province.options[provinceSelectedIndex]; //遍历城市列表
for (var i = 0; i < cityList.length; i++) {
if (cityList[i].province == provinceSelectedOption.innerText) {
for (var j = 0; j < cityList[i].city.length; j++) {
//创建节点
var optionNew = document.createElement("option");
//为节点属性赋值
optionNew.innerText = cityList[i].city[j];
//添加节点
city.appendChild(optionNew);
}
}
}
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="province" style="width: 200px;">
<option selected="selected">--请选择--</option>
<option>四川省</option>
<option>山东省</option>
<option>浙江省</option>
<option>海南省</option>
</select>
<select id="city" style="width: 200px;">
</select>
</div>
</form>
</body>
效果图:
2015年2月2日,改成代码版,原来是图片版。
javascript中的省市级联效果的更多相关文章
- JavaScript学习笔记- 省市级联效果
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- JavaScript 省市级联效果
JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- JavaScript实现省市级联效果实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 纯js实现省市级联效果
我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...
- javascript中全屏滑动效果实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用JavaScript中jQuery编写放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 省市级联.net
初学javascript,编译省市级联,使用json在一般处理程序中编译,利用ajax传递数据到web前台 <html xmlns="http://www.w3.org/1999/xh ...
- 利用arguments对象在javaScript中实现重载(overload)
一些概念: 重载(overload): 什么是: 相同函数名,不同参数列表的多个函数,在调用时,可根据传入参数的不同,自动选择对应的函数调用! 为什么: 减轻调用者的负担,一个函数名,可执行多种操作 ...
- bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- java适配器模式随笔记
今天学习了一下java中的适配器模式,在这里做个记录,方便以后查看 什么是适配器,适配就是连接源到目标的中间件,简单的例子就是我们的港水货手机充电器是大三角,我们想要在大陆正常使用我们需要一个转接充电 ...
- makefile文件的技术
[快速的学习笔记] gcc命令:http://www.cnblogs.com/ggjucheng/archive/2011/12/14/2287738.html#_Toc311642845 makef ...
- 获取JDK动态代理/CGLIB代理对象代理的目标对象。
问题描述:: 我现在遇到个棘手的问题,要通过spring托管的service类保存对象,这个类是通过反射拿到的,经过实验发现这个类只能反射取得sservice实现了接口的方法,而extends类的方法 ...
- Umbraco(6)-Creating More Pages Using the Master - Part 2(翻译文档)
创建一个Contact Us页面 我们将创建一个新的”联系我们“页面,在该页面我们将放置简单的联系信息.对于添加这个功能你可能想替换为一个完全成熟的形式. 一些有效的解决方案: 使用表面控制器构建自己 ...
- wifi密码破解-Linux工具篇-video
链接: https://pan.baidu.com/s/1eREVoH0 密码: ajk5 博客地址:http://www.cnblogs.com/XieMinQiang/ (长按图 ...
- Sass和Compass设计师指南
注:配合查看:Sass 为什么使用Sass和Compass? 1.减少重复工作,加快开发进度 2.使用变量,便于记忆,变量使用$符号开头 3.自动转换RGBA颜色值 .color { color: $ ...
- CKEditor配置及使用
注:使用CKEditor版本为js版本的CKEditor 4,所有配置均参考自CKEditor官方API:http://docs.ckeditor.com/,以及实践经验 一.快速使用 1.引入CKE ...
- 基于asp.net MVC 的服务器和客户端的交互(三)之客户端请求响应
一.分析 WEB API 中HTTP 请求方式的四个主要方法 (GET, PUT, POST, DELETE), 按照下列方式映射为 CURD 操作: GET 用于获取 URI 资源的进行展示,GET ...
- HDU 5437 Alisha’s Party (优先队列)——2015 ACM/ICPC Asia Regional Changchun Online
Problem Description Princess Alisha invites her friends to come to her birthday party. Each of her f ...
- Android之天气APP
做一个天气信息APP,通过读取公开发布的气象数据,提供实时天气更新,帮助用户时刻了解天气情况.通过APP可以查询到自己所处位置的天气预报,也可以通过定位系统,获取省内任意位置的气象环境信息. API接 ...