[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省市加载-第二十七天的更多相关文章

  1. jquery的ready方法（DOM是否加载完）详解与使用

    jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:

  2. html dom的加载

    操作HTML DOM文档的一个难题是,你的JavaScript代码可能在DOM完全载入之前运行,这会导致你的代码产生一些问题.页面加载时浏览器内部操作的顺序大致是这样的: 1. HTML被解析. 2. ...

  3. 页面全部加载完毕和页面dom树加载完毕

    dom树加载完毕 $(document).ready()//原生写法document.ready = function (callback) {            ///兼容FF,Google   ...

  4. setUserVisibleHint的使用.执行顺序和viewPager.setOffscreenPageLimit(0)不管用还是默认会加载第二个fragment

    处理问题一:viewPager.setOffscreenPageLimit(0)不管用还是默认会加载第二个fragment的原因(源码解读); 处理问题二:setUserVisibleHint的使用场 ...

  5. chrome://inspect调试html页面空白，DOM无法加载的解决方案

    chrome://inspect调试html页面空白,DOM无法加载的解决方案 先描述一下问题 有一段时间没碰huilder hybird app 开发了,今天调试的时候 chrome://inspe ...

  6. DWZ-JUI+UEditor第二次不显示，UEditor异步加载第二次不显示的解决方案

    使用UEditor-1.4.3中遇到第一次跳转到使用UEditor的界面后,编辑器加载正常,返回后第二次再跳转到这个界面就出现UEditor无法正常加载, 也没百度到答案,看UEditor源码,发现这 ...

  7. window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕

    http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...

  8. DOM元素加载之前执行的jQuery代码

    <script type="text/javascript"> (function() { alert("DOM还没加载哦!"); })(jQuer ...

  9. 所有DOM元素加载之前执行的页面加载事件[jquery]

    <script type="text/javascript"> (function() { alert("DOM还没加载"); })(jQuery) ...

随机推荐

  1. Win8 Metro(C#) 数字图像处理--1 图像打开，保存

    原文:Win8 Metro(C#) 数字图像处理--1 图像打开,保存 作为本专栏的第一篇,必不可少的需要介绍一下图像的打开与保存,一便大家后面DEMO的制作.   Win8Metro编程中,图像相关 ...

  2. 深入理解SQL Server 2005 中的 COLUMNS_UPDATED函数

    原文:深入理解SQL Server 2005 中的 COLUMNS_UPDATED函数 概述 COLUMNS_UPDATED函数能够出现在INSERT或UPDATE触发器中AS关键字后的任何位置,用来 ...

  3. c#实现golang 的channel

    使用.NET的 BlockingCollection<T>来包装一个ConcurrentQueue<T>来实现golang的channel. 代码如下: public clas ...

  4. Android零基础入门第10节：开发IDE大升级，终于迎来了Android Studio

    原文:Android零基础入门第10节:开发IDE大升级,终于迎来了Android Studio 通过前面几期的学习,我们知道了Android的前世今生,也了解了Android的系统架构和应用组件,也 ...

  5. UWP SQLite的使用

    原文:UWP SQLite的使用 1.准备工作 1.首先我们要给项目添加"SQLite for Universal Windows Platform"扩展 点击菜单栏的" ...

  6. 基于 libevent 开发的 C++ 11 高性能网络服务器 evpp（360的作品）

    evpp是一个基于libevent开发的现代化C++11高性能网络服务器,自带TCP/UDP/HTTP等协议的异步非阻塞式的服务器和客户端库. 特性: 现代版的C++11接口 非阻塞异步接口都是C++ ...

  7. C++虚函数表解析（图文并茂，非常清楚）（ 任何妄图使用父类指针想调用子类中的未覆盖父类的成员函数的行为都会被编译器视为非法）good

    C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用父类型别的指针指向其子类的实例,然后通过父类的指针调用实际子类的成员函数.这种技术可以让父类的指针有“多种形态”,这是一种泛型技术 ...

  8. VS2013编译Qt5.6.0静态库，并提供了百度云下载（乌合之众）good

    获取qt5.6.0源码包 直接去www.qt.io下载就好了,这里就不详细说了. 这里是我已经编译好的** 链接:http://pan.baidu.com/s/1pLb6wVT 密码: ak7y ** ...

  9. 线程天敌TerminateThread与SuspendThread

    线程天敌TerminateThread与SuspendThread 作者:童磊(magictong) 目的:不是演示TerminateThread和SuspendThread的原理而是希望能在自己的程 ...

  10. Kafka笔记5

    Kafka使用zookeeper来维护集群成员的信息.每个broker都有一个唯一标识符,这个标识符可以在配置文件指定,也可以自动生成. 在broker停机,出现网络分区或者长时间垃圾回收停顿时,br ...