<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content="猿道教育-Will老师" >
<meta name="Keywords" content="猿说教育,HTML,CSS,JavaScript、省市区级联下拉列表" >
<meta name="Description" content="网页的描述信息，简介：省市区级联下拉列表的实现" >
<title>省市区级联下拉列表</title>
<style>
select{ /*元素选择器，所有的同名标签select*/
border:1px solid blue;
/*padding:5px 10px; 上下、左右*/
border: 1px solid red; /*后面的优先级高*/
padding: 5px 10px 6px 7px;
margin: 20px 25px;
border-radius:25px;
}
.bigSel{ /*类选择器 某个元素class属性值=bigSel*/
width:280px;
}
#provinces{ /*id选择器，id属性值=provinces，优先级>类选择器>元素选择器*/
border-color:blue;
}
</style>
<script>
// $是自己定义的一个方法，用于根据id获取元素
function $(v){
return document.getElementById(v);
}
var p = ['四川','河南','河北','山西','贵州','山东','甘肃'];
p['四川'] = ['成都','绵阳','攀枝花','德阳','雅安'];
p['河南'] = ['郑州','洛阳','周口','开封','信阳'];
p['河北'] = ['保定','石家庄','邢台','唐山','邯郸'];
p['成都'] = ['金牛区','成华区','武侯区','天府区','郫都区'];
p['郑州'] = ['金水区','二七区'];
// 在页面加载的时候讲所有省份添加到provinces的select中
window.onload = function(){
// 遍历省份数组，将其中的所有值，构造Option对象添加到省份下拉框中
for(var i=0; i<p.length; i++){
// $是自己定义的一个方法，用于根据id获取元素
$("provinces").options.add(new Option(p[i],p[i]));
}
// 页面加载的时候，设置默认省份为 四川，城市变换为省会，区取这个城市的第一个区？
$('provinces').value = "四川";
showCitys($('provinces').value);
$('citys').value = $('citys').options[0].value;
showAreas($('citys').value);
}
/*在城市下拉框中显示省份v对应的所有城市*/
function showCitys(v){
// 清空城市列表框中原有所有城市
$("citys").options.length = 0;
if(!(v<0)){
var citys = p[v]; // 拿到这个省份对应的所有城市
for(var i= 0; i<citys.length; i++){
$("citys").options.add(new Option(citys[i],citys[i]));
}
}
// 设置地区默认值为第一个区
showAreas($("citys").value);
}
/*在地区下拉框中显示该城市对应的所有区县*/
function showAreas(v){
$("areas").options.length = 0;
if(!(v<0)){
// 拿到城市对应的所有区县
var areas = p[v];
for(var i=0; i<areas.length;i++){
$('areas').options.add(new Option(areas[i],areas[i]));
}
}
}
</script>
</head>
<body>
<!-- 乱码产生的原因：文件保存时的编码与打开文件时使用的编码不一致
文件内部设置的编码，与文件保存时的编码不一致
-->
<form name="frmProvince">
<select name="provinces" id="provinces" class="bigSel" οnchange="showCitys(this.value)">
<option value="-1">-- 请选择 --</option>
</select>
<select name="citys" id="citys" οnchange="showAreas(this.value)">
<option value="">-- 请选择 --</option>
</select>
<select name="areas" id="areas" >
<option value="">-- 请选择 --</option>
</select>
</form>
</body>
</html>