20131222-Dom省市加载-第二十七天

[1]省市选择

<head>

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>

市：

</select>

</body>

转载于:https://www.cnblogs.com/CharlesZHENG/p/4125048.html

20131222-Dom省市加载-第二十七天相关推荐

JQuery学习记录——DOM的加载
一.加载DOM 在页面加载完毕后,浏览器会通过javaScript为DOM元素加载事件,在js中通常使用window.οnlοad=function(){...}方法,在JQuery中使用$(docu ...
JavaScript 判断 DOM 何时加载完毕
处理HTML DOM文档存在一个难题是,JavaScript可以在DOM完全加载之前执行,这会给你的代码引发不少的潜在问题.浏览器的渲染和操作顺序大致如下列表: HTML解析完毕外部脚本和样式表加载 ...
SpringMVC--Ajax异步加载数据$(function (){ 逻辑代码}) 的意思是让dom结构加载完毕后再去执行逻辑代码
1. SpringMVC–Ajax异步加载数据 1.1 实体类user User.java package com.tian.pojo;import lombok.AllArgsConstructor ...
dom vue 加载完执行_前端面试题——Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...
dom vue 加载完执行_前端面试题Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题,然后现在也是找了一些在 Vue 方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴. 如果文章中有出现 ...
DOM编程以及domReady加载的几种方式
1,关于DOM编程 DOM编程主要是对dom树节点进行操作,所以你必须掌握基本的节点类型,如何去获取节点名字以及值(这些相关知识你可以去网上查,这里推荐一个慕课学习网站->http ...
angular监听图片加载完成_angular监听dom渲染完成，判断ng-repeat循环完成
一.前言最近做了一个图片懒加载的小插件,功能需要dom渲染完成后,好获取那些需要懒加载的dom元素.那么问题来了,如果只是感知静态的dom用ready,onload都可以,但项目用的angular, ...
页面加载完毕_【前端面试】dom 的解析，加载，渲染
本文会把 dom 的解析,加载,渲染结合 window.performance 一起讲. dom 的解析解析:HTMl 解析器把 HTML 构建成 HTML 树形数据结构,也就是 DOM 树. 注意 ...
Jquery加载dom元素
JQuery加载DOM元素使用JQuery的第一件事就是下载jquery库,并调成Jquery库! <script src="js/jquery-1.7.1.min.js" ...

20131222-Dom省市加载-第二十七天

20131222-Dom省市加载-第二十七天相关推荐

最新文章

热门文章