HTML CSS JavaScriptjs实战篇-省级联动
Posted 悠悠-wzr
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML CSS JavaScriptjs实战篇-省级联动相关的知识，希望对你有一定的参考价值。
废话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省级联动</title>
</head>
<body>
请选择省份: <select name="" id="prov">
<option value="prov">请选择</option>
</select>
请选择市:<select name="" id="city">
<option value="city">请选择</option>
</select>
请选择区县: <select name="" id="country">
<option value="city">请选择</option>
</select>
</body>
<script>
// 数据：
var provArr = [
"湖北",
"湖南",
"河北",
"河南"
];
var cityArr = [
//[cityName:"武汉",
["武汉", "荆州", "黄冈"],
["长沙", "湘潭", "怀化"],
["秦皇岛", "石家庄", "保定"],
["南阳", "郑州", "平顶山"]
];
var countryArr = [
[
["青山", "洪山", '武昌'],
["荆州区", "江陵", '公安'],
["黄州", "武穴", '浠水'],
],
[
["长沙1", "长沙2", '长沙3'],
["湘潭1", "湘潭2", '湘潭3'],
["怀化1", "怀化2", '怀化3'],
],
[
["秦皇岛1", "秦皇岛2", '秦皇岛3'],
["石家庄1", "石家庄2", '石家庄3'],
["保定1", "保定2", '保定3'],
],
[
["南阳1", "南阳2", '南阳3'],
["郑州1", "郑州2", '郑州3'],
["平顶山1", "平顶山2", '平顶山3'],
]
];
//获取省份id
var province = document.getElementById("prov");
var city = document.getElementById("city");
var country = document.getElementById("country");
common(provArr, province);
// 为省份下拉列表添加事件，添加城市二级菜单
province.addEventListener("change", add);
function add(e)
//初始化城市列表-清空列表
city.options.length = 0;
country.options.length = 0;
if (province.value == "prov")
var option = document.createElement("option");
option.innerHTML = "请选择";
city.appendChild(option);
var optionCountry = option.cloneNode(true);
country.appendChild(optionCountry);
else
common(cityArr[province.value], city)
common(countryArr[province.value][city.value], country);
//为城市二级菜单添加事件，添加区的三级菜单
city.addEventListener("change", addCountry);
function addCountry()
//清空区列表
country.options.length = 0;
common(countryArr[province.value][city.value], country);
if (city.options.length == 0)
var option = document.createElement("option");
option.innerHTML = "请选择";
city.appendChild(option);
if (country.options.length == 0)
var option = document.createElement("option");
option.innerHTML = "请选择";
country.appendChild(option);
//添加数据
//循环取出数据赋值给option对象
function common(arr, obj)
arr.forEach(
function(v, k)
//创建省份下拉菜单
var option = document.createElement("option");
option.innerHTML = v;
//给每个元素添加value使之成为对应的index
option.value = k;
//追加元素给省份菜单
obj.appendChild(option);
)
</script>
</html>以上是关于HTML CSS JavaScriptjs实战篇-省级联动的主要内容，如果未能解决你的问题，请参考以下文章
02_HTML5+CSS3详解第五天（实战篇之HTML5制作企业网站）