省市区级联下拉列表的实现

<!doctype html>

<html>

<head>

<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*/

280px;

}

#provinces{ /*id选择器，id属性值=provinces，优先级>类选择器>元素选择器*/

border-color:blue;

}

</style>

// $是自己定义的一个方法，用于根据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>

<!-- 乱码产生的原因：文件保存时的编码与打开文件时使用的编码不一致

文件内部设置的编码，与文件保存时的编码不一致

-->

</select>

</select>

</select>

</form>

</body>

</html>