javascript基于DOM实现省市级联下拉框的方法

   本文实例讲述了javascript基于DOM实现省市级联下拉框的方法。分享给大家供大家参考。具体实现方法如下:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市级联下拉框</title>
<script type="text/javascript">
var provs = { "江西省": ["南昌市", "景德镇", "九江", "鹰潭", "萍乡", "新馀", "赣州", "吉安", "宜春", "抚州", "上饶"],
"福建省": ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
"河北省": ["石家庄", "邯郸", "邢台", "保定", "张家口", "承德", "廊坊", "唐山", "秦皇岛", "沧州", "衡水"]
};
function loadProv() {
//加载省份数据
var prov = document.getElementById("prov");
for (var key in provs) {
var provName = key;
var optProv = document.createElement("option");
optProv.value = provName;
optProv.innerText = provName;
prov.appendChild(optProv);
}
}
function provChange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
var provName = prov.value;
//如果没有选择省份,则把城市下拉框隐藏
if (provName == "none") {
city.style.display = "none";
return;
}
else {
city.style.display = "";
}
var citys = provs[provName];
//city.options.length = 0;
//用这种方法也可以清空原始列表
//清空城市的原始数据
for (var i = city.childNodes.length - 1; i >= 0; i--) {
var child = city.childNodes[i];
city.removeChild(child);
}
//添加新的城市数据
for (var i = 0; i < citys.length; i++) {
var optCity = document.createElement("option");
optCity.value = citys[i];
optCity.innerText = citys[i];
city.appendChild(optCity);
}
}
</script>
</head>
<body onload="loadProv()">
<select id="prov" onchange="provChange()">
<option value="none">请选择省</option>
</select>
<select id="city" style="display:none"></select>
</body>
</html>

  希望本文所述对大家的javascript程序设计有所帮助。

时间: 2016-05-15

javascript基于DOM实现省市级联下拉框的方法的相关文章

AJAX级联下拉框的简单实现案例

 本篇文章主要是对AJAX级联下拉框的简单实现案例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 需要的JAVA类    代码如下: package com.ajaxlab.ajax;  import java.util.ArrayList;  import java.util.Collection;  import java.util.Iterator;  import org.jdom.Document;  import org.jdom.Element;  import org.

jquery实现省市select下拉框的替换

 本篇文章主要是对jquery实现省市select下拉框的替换(示例代码)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 省市对应的实现:<还有一些没封装起来>    更具选择的省份来确定市的内容   jsp代码:    代码如下: <body>   省份<select name="prin">    <option>--请选择--</option>    <option>福建</option>

ajax级联下拉框

问题描述 学校已经是动态读取了,根据学校读取年级,根据年级读取到班级!是从数据库里读的!ajax访问即可!求大神指点一二! 解决方案 解决方案二:在学校的onchange事件中,发送ajax请求啊.解决方案三:首先第一个下拉框选中一条数据以后,出发onchange时间,利用Ajax去后台根据你选的数据查询数据,然后拼字符串,再在前台将option拼出来..这是思路,具体的实现代码网上有很多.解决方案四:2楼正解解决方案五:二楼正解解决方案六:楼上都是正解解决方案七:5楼才是正解解决方案八:这就是

基于jquery扩展漂亮的下拉框可以二次修改_jquery

继续发一篇关于web前端自定义控件--ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼,现在分享这个控件,希望有用的同仁们可以收藏,或进行二次修改,达到你想要的效果. 分解自定义下拉框: 1.创建构造函数,初始化赋值控件值. 2.绑定控件呈现在前台. 3.点击下拉框控件,展示下拉列表 4.点击触发下拉框控件,收起下拉列表. 5.点击下拉项触发事件. 代码如下: Html代码: 复制代码 代码如下: <b class="select_type"><

破解百度相关搜索神秘性 分享百度下拉框成功方法

当我们在百度的搜索框里面,搜索一个关键词后,首先我们能够看到百度搜索框变成了一个下拉框,很多相关的搜索会出现在下拉框里面,而在这个关键词的搜索结果页面的底部,也会同样出现一些相关关键词,这是百度为了提升用户搜索体验的一种功能,可正是这种功能,往往能够给我们草根站长带来丰厚的利润,只要我们能够把自己网站的长尾关键词做到这个下拉框或者相关搜索里面,就会给自己网站带来相当不错的高转化率的流量!可是又如何能够实现呢?那就从百度的相关搜索原理来说起吧! 首先,搜索引擎制定的排名规则,网站的流量往往是比较看

在Excel单元格中使用下拉框的方法

有时候我们只希望在Excel中的某个单元格中只允许输入某几个限定的数据,这时候我们就可能希望把该单元格设置成为下拉框的形式了,如下图所示: 下面就看看是怎么实现的吧. 1.我们选择一个单元格--数据--数据有效性--数据有效性 2.在设置框中输入如下设置: 3.就可以达到我们想要的效果啦:         注:更多请关注电脑教程栏目,三联电脑办公群:189034526欢迎你的加入

javascript调用XML制作连动下拉框

传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中.这种方法不适用于下拉框内容经常改变的情况.因为数据源和javascript程序写死在同一页面.   <html><head><title>List</title><meta http-equiv="Content-Type" content="text/ht

Javascript 调用XML制作连动下拉框

javascript|xml|下拉 传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中.这种方法不适用于下拉框内容经常改变的情况.因为数据源和javascript程序写死在同一页面.   <html><head><title>List</title><meta http-equiv="Content-Type" con

利用ASP.NET 2.0的客户端回调功能制作下拉框无限级联动

asp.net|客户端|下拉 记得以前做asp的时候,常会碰到下拉框多级联动,比如说在注册的时候,需要选择省和城市,这就需要二级联动,那个时候一个普遍的做法就是利用javascript脚本来实现,先把数据从数据库中读取出来,放到javascript的数组中,在下拉框的onchange事件触发时,就可以直接从javascript的数组中读取想要的数据.后来在asp.net 1.0中开发时,这种方法也通用,但如果要多级的话,有一个很大的缺点,就是它需要把数据一次性全部读到javascript的数组中