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.οnlοad=function(){
var province=document.getElementById('province'); //省的select
var city=document.getElementById('city'); //市的select
var areas=document.getElementById('areas'); //区的select
add_data(province,0); //添加省
province.οnchange=function(){ //省改变时,传入市,传入省的value
add_data(city,this.value)
};
city.οnchange=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.οnkeyup=function(){
num.innerHTML=10-this.value.length;
}
</script>
</body>
</html>
收获:
1 数据处理的能力特别重要
2 能让客户选择的,就不要让客户填写
3 给select添加内容时,虽然他是表单元素,但是可以使用innerHTML,
可以这样记忆:双标签用innerHTML,单标签用value
4 select的值改变,使用onchange事件
5 option没有设value时,取其内容值
6 当一些代码相同时(出现拷贝代码的情况),就需要优化了。可以定义一个函数,然后通过传不同的参数,实现相应功能。