(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 - 1index >= 0index--) {
var child = city.childNodes[index]
city.removeChild(child)
},遍历城市下拉菜单下的option元素,然后删除这些元素。
之所以清空就是为了防止当再次加载的时候出现累加情况。
(18)for (var index = 0index <citys.lengthindex++) {},遍历数组中的元素,也就是城市。
(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下拉菜单。
数据表形式数据
json形式数据
<Script>function cx(){
//-一个国家、省、市的联动这么麻烦?参考下面代码
//根据下拉框每次的改变。得到下级省、市。动态添加
var selectA = document.getElementById('A')
var selectB = document.getElementById('B')
var acc=new Array()
acc['请选择']=['请选择']
acc['四川']=['汶川','眉山']//所有省对应的市
acc['武汉']=['襄阳','宜昌','随州']
selectB.options.length=0
for(var i=0i<acc[selectA.value].lengthi++){
selectB.options.add(new Option(acc[selectA.value][i],acc[selectA.value][i]))
}
}
</Script>
</HEAD>
<BODY>
<select onchange="cx()" id="A">
<option value="请选择">请选择</option>
<option value="四川">四川</option>
<option value="武汉">武汉</option>
</select>
<select id="B">
<option value="请选择">请选择</option>
</select>
</BODY>
</HTML>
在三级地址这个元素上,绑定一二级的数据标记,根据这些标记把一二级也显示出来。比如 河北-》石家庄-》赵县。在赵县这个元素上绑定数据eg。data-xx=“60”data-x="9" 这里数据代办一二级的对应的数据标记,可以根据这个来确定一二级。