20131222-Dom省市加载-第二十七天
[1]省市选择
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
//1.动态加载省份
var datas = {
"山东": ["青岛", "济南", "烟台"],
"山西": ["大同", "太原", "运城"],
"陕西": ["西安", "咸阳", "汉中"]
};
var defaultProvince = '山西';
loadProvince(datas, defaultProvince);
//2.根据默认选中的省份，动态加载城市信息
loadCity(datas, defaultProvince);
//2.为省份的select注册一个选择项改变事件，当选择项改变后动态改变"城市列表"
document.getElementById('s1').onchange = function () {
//1.获取当前选中项
//this.value指的就是，当前select中被选中的那个option的value值。
//alert(this.value);
//获取当前用户选中的省份
var currentProvince = this.value;
//根据省份信息加载城市
loadCity(datas, currentProvince);
};
};
//加载城市的方法
function loadCity(dict, dp) {
var s2Obj = document.getElementById('s2');
//重新加载之前清空一下s2
while (s2Obj.firstChild) {
s2Obj.removeChild(s2Obj.firstChild);
}
//根据默认选中省份，查找对应的城市信息
var city = dict[dp];
//将找到的城市数据加载到s2中
for (var i = 0; i < city.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = city[i];
opt.value = city[i];
s2Obj.appendChild(opt);
}
}
//加载省份的方法
function loadProvince(dict, dp) {
var s1Object = document.getElementById('s1');
//遍历dict数据
for (var key in dict) {
//每遍历一条数据，则向selelct增加一个option
var opt = document.createElement('option');
opt.innerHTML = key;
opt.value = key;
//如果当前遍历的省份与"默认要选中的省份"相同
if (key == dp) {
//设置默认被选中的option
opt.selected = true;
}
//var opt = new Option(key,key);
s1Object.appendChild(opt);
}
}
</script>
</head>
<body>
省：
<select id="s1">
</select>
市：
<select id="s2">
</select>
</body>
20131222-Dom省市加载-第二十七天的更多相关文章
- jquery的ready方法（DOM是否加载完）详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- html dom的加载
操作HTML DOM文档的一个难题是,你的JavaScript代码可能在DOM完全载入之前运行,这会导致你的代码产生一些问题.页面加载时浏览器内部操作的顺序大致是这样的: 1. HTML被解析. 2. ...
- 页面全部加载完毕和页面dom树加载完毕
dom树加载完毕 $(document).ready()//原生写法document.ready = function (callback) { ///兼容FF,Google ...
- setUserVisibleHint的使用.执行顺序和viewPager.setOffscreenPageLimit(0)不管用还是默认会加载第二个fragment
处理问题一:viewPager.setOffscreenPageLimit(0)不管用还是默认会加载第二个fragment的原因(源码解读); 处理问题二:setUserVisibleHint的使用场 ...
- chrome://inspect调试html页面空白，DOM无法加载的解决方案
chrome://inspect调试html页面空白,DOM无法加载的解决方案 先描述一下问题 有一段时间没碰huilder hybird app 开发了,今天调试的时候 chrome://inspe ...
- DWZ-JUI+UEditor第二次不显示，UEditor异步加载第二次不显示的解决方案
使用UEditor-1.4.3中遇到第一次跳转到使用UEditor的界面后,编辑器加载正常,返回后第二次再跳转到这个界面就出现UEditor无法正常加载, 也没百度到答案,看UEditor源码,发现这 ...
- window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕
http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...
- DOM元素加载之前执行的jQuery代码
<script type="text/javascript"> (function() { alert("DOM还没加载哦!"); })(jQuer ...
- 所有DOM元素加载之前执行的页面加载事件[jquery]
<script type="text/javascript"> (function() { alert("DOM还没加载"); })(jQuery) ...
随机推荐
- Qt4可以使用trUtf8函数，其内容可以是中文，也可以是\F硬编码
显示在textBrowser->setText 中文乱码 转成QObject::trUtf8即可. ui->textBrowser->setText((QObject::trUtf8 ...
- VS2012 调试Web项目 遭遇 HTTP 错误 500.23 - Internal Server Error
原文:VS2012 调试Web项目 遭遇 HTTP 错误 500.23 - Internal Server Error 在使用vs2012 调试Web站点时 报错 500.23,详细如图 此错误是因为 ...
- SQL Server 2016新特性：DROP IF EXISTS
原文:SQL Server 2016新特性:DROP IF EXISTS 在我们写T-SQL要删除某个对象(表.存储过程等)时,一般会习惯先用IF语句判断该对象是否存在,然后DROP,比如: 旧 ...
- Win10《芒果TV》商店版2016-2017春节大礼，每日前100名用户免费领取7天VIP
告别2016,喜迎2017,鸡年大吉,春节期间,每天登录Win10<芒果TV>商店版的前100位用户可领取一张芒果TV会员7天体验卡,先到先得. 芒果TV会员权益: 1.全站免广告 2.自 ...
- MyCat的初步了解
MyCat 1 开源数据库中间件 MyCat 如今随着互联网的发展,数据的量级也是撑指数的增长,从GB到TB到PB.对数据的各种操作也是愈加的困难,传统的关系性数据库已经无法满足快速查询与插入数据 ...
- painter半透明的 底层窗口全透明背景
- 社会不是承认有学历的人, 而是承认努力过得人, 而且是真正努力过不是穷忙的人（没有学历就要多付出一倍的努力）good
送你一句 这就是你水平差的理由? 楼主你工资低是因为你技术不行, 不想努力然后怪罪学历, 为什么学历高的混得好, 因为学历高的人努力过, 你没学历技术还不行, 凭什么证明你努力过, 社会不是承认有学历 ...
- 将QT开发的界面程序封装成DLL，在VC中成功调用（必须有消息循环，所以使用了QTWinmigrate，附CSDN可下载的Demo）
最近手头的一个项目需要做一个QT界面,并且封装成DLL,然后再动态调用DLL给出的接口函数,使封装在DLL内部的QT界面跑起来,在网上查了很多资料,今天终于成功了,经验不敢独享,因为CSDN给了我很多 ...
- 前端 JS 修炼（第一天）包装对象、作用域、创建对象
1.js基本概念以及注意 直接量 :程序中直接使用的数据值.下面列出的都是直接量: 1 12 //数字 2 1.2 //小数 3 "hello world" //字符串文本 4 t ...
- 分享Sql Server 2008 r2 数据备份，同步服务器数据（二.本地发布，订阅）
上一篇文章中写到了数据库的本地备份,这一篇主要分享一下关于不同服务器的数据备份,主要是使用sql server中的本地发布,本地订阅功能,在数据库的读写分离中,也会经常性的用到这个功能. 复制-> ...