实例——省市区三级联动 & 还可以输入字符统计
1 省市区三级联动
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三级联动3</title> <script src="js/area3.js"></script> </head> <body> 省：<select id="province"> </select> 市：<select id="city"> <option>请选择</option> </select> 区：<select id="areas"> <option>请选择</option> </select> </body> </html>
js代码：
var data = [
[1,"山东省",0],
[2,"江苏省",0],
[11,"济南市",1],
[12,"青岛市",1],
[13,"淄博市",1],
[21,"南京市",2],
[22,"宿迁市",2],
[131,"张店区",13],
[132,"淄川区",13],
[133,"博山区",13],
[111,"历城区",11],
[112,"历下区",11]
];
window.onload=function(){
var province=document.getElementById('province'); //省的select
var city=document.getElementById('city'); //市的select
var areas=document.getElementById('areas'); //区的select
add_data(province,0); //添加省
province.onchange=function(){ //省改变时，传入市，传入省的value
add_data(city,this.value)
};
city.onchange=function(){ //市改变时，传入区，传入市的value
add_data(areas,this.value)
};
}
function add_data(obj,vid){ //传入两个参数：对象，值
areas.innerHTML='<option value="-1">请选择</option>'; //点击省时，把区的数据清掉
var str='<option value="-1">请选择</option>';
for(var i=0; i<data.length; i++){
if(data[i][2] == vid){
str+='<option value="'+data[i][0]+'">'+data[i][1]+'</option>';
}
}
obj.innerHTML=str;
}
2 还可以输入的字符数统计
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>还可以输入</title>
</head>
<body>
<p>还可以再输入<span id="num">10</span>个字符</p>
<textarea id="my_input" rows="10" maxlength="10"></textarea>
<script>
var num=document.getElementById('num');
var inbox=document.getElementById('my_input');
inbox.onkeyup=function(){
num.innerHTML=10-this.value.length;
}
</script>
</body>
</html>
收获：
1 数据处理的能力特别重要
2 能让客户选择的，就不要让客户填写
3 给select添加内容时，虽然他是表单元素，但是可以使用innerHTML，
可以这样记忆：双标签用innerHTML，单标签用value
4 select的值改变，使用onchange事件
5 option没有设value时，取其内容值
6 当一些代码相同时（出现拷贝代码的情况），就需要优化了。可以定义一个函数，然后通过传不同的参数，实现相应功能。
