快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

javascript省市级联效果详解

2017-6-19 16:51| 发布者: admin| 查看: 64| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了省市级联效果,这种效果在大量的网站中都有使用。

下面详细介绍一下它的实现过程,需要的朋友可以做一下参考。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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];
 
  for (var index = city.childNodes.length - 1; index >= 0; index--) {
    var child = city.childNodes[index];
    city.removeChild(child);
  }
   
  for (var index = 0; index < citys.length; index++) {
    var optCity = document.createElement("option");
    optCity.value = citys[index];
    optCity.innerText = citys[index];
    city.appendChild(optCity);
  }
}
window.onload=function(){
  loadProv();
  var prov = document.getElementById("prov");
  prov.onchange=function(){provChange()}
}
</script>
</head>
<body>
<select id="prov">
  <option value="none">请选择省</option>
</select>
<select id="city" style="display:none"></select>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var provs={},存储省市的json结构数据。

(2).function loadProv() {},此函数实现了初始化页面加载数据的功能。

(3).var prov = document.getElementById("prov"),获取存放省份的select下拉菜单。

(4).for (var key in provs),遍历json结构数据。

(5).var provName = key,获取省份的名称。

(6).var optProv = document.createElement("option"),创建一个option元素对象。

(7).optProv.value = provName,设置option元素的value属性值。

(8).optProv.innerText = provName,设置option显示的文本内容。

(9).prov.appendChild(optProv),将option元素添加到select下拉菜单。

(10).function provChange() {},作为onchange事件处理函数。

(11).var prov = document.getElementById("prov"),获取省份下拉菜单。

(12).var city = document.getElementById("city"),获取城市下拉菜单。

(13).var provName = prov.value,获取当前选中的省份的value值。

(14).if (provName == "none") {

  city.style.display = "none";

  return;

},如果值等于none,说明选中的是第一项,那么城市下拉菜单还是具有隐藏状态,并跳出函数。

(15).else {

  city.style.display = "";

},否则的话显示出城市下拉菜单,默认状态它是隐藏的。

(16).var citys = provs[provName],获取城市,citys是个数组。

(17).for (var index = city.childNodes.length - 1; index >= 0; index--) {

  var child = city.childNodes[index];

  city.removeChild(child);

},遍历城市下拉菜单下的option元素,然后删除这些元素。

之所以清空就是为了防止当再次加载的时候出现累加情况。

(18).for (var index = 0; index < citys.length; index++) {},遍历数组中的元素,也就是城市。

(19).var optCity = document.createElement("option"),创建option元素。

(20).optCity.value = citys[index],设置option元素的value值。

(21).optCity.innerText = citys[index],设置option元素的文本内容。

(22).city.appendChild(optCity),将option元素添加select下拉菜单。

二.相关阅读:

(1).for in语句可以参阅javascript for in一章节。

(2).document.createElement()可以参阅document.createElement()一章节。

(3).appendChild()可以参阅js appendChild()一章节。

(4).childNodes可以参阅childNodes一章节。

(5).removeChild()可以参阅js removeChild()一章节。

(6).onchange事件可以参阅javascript change事件一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-6-27 16:38 , Processed in 0.056740 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部