第二次作业
------------------------------------------------城市三级联动------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>城市三级联动</title>
<style>
h1{
color:#8B0000;
text-align:center;
}
div{
width:100%;
text-align:center;
}
</style>
</head>
<body>
<h1>城市三级联动</h1>
<div>
<select id="province">
<option value="-1">--请选择--</option>
</select>
<select id="city"><option>--请选择--</option></select>
<select id="country"><option>--请选择--</option></select>
</div>
<script type="text/javascript">
var provinceArr = ['上海','湖南','江苏'];
var cityArr = [
['上海市'],
['长沙市','岳阳市','株洲市','湘潭市','邵阳市'],
['苏州市','南京市','扬州市','盐城市']]
var countryArr = [
[['黄浦区','静安区','长宁区','浦东区']
],[
['芙蓉区','岳麓区','天心区','开福区','雨花区','望城区'],
['岳阳楼区','云溪区','岳阳县','华容县','湘阴县','平江县'],
['天元区','芦淞区','荷塘区','石峰区','渌口区'],
['雨湖区','岳塘区','湘潭县','韶山市','湘乡区'],
['洞口县','隆回县','绥宁县','邵阳县','邵东县']
],[
['虎丘区','吴中区','相城区','姑苏区','吴江区'],
['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
['邗江区','广陵区','江都区'],
['盐都区','亭湖区','大丰区','响水县','滨海县']
]];
//为select添加option
function createOption(obj,data){ //obj表示下拉列表的名字;data表示数组(一个下拉菜单里所有值组成的数组)
for(var i in data){ //循环数组
var op = new Option(data[i],i); //<option value="i">data[i]</option>
obj.options.add(op); //添加option(即下拉列选项)
}
}
var province = document.getElementById('province'); //获得ID为'province'的select元素
createOption(province,provinceArr); //调用函数createOption()
var city = document.getElementById("city");
province.onchange = function(){
city.options.length = 0;
createOption(city,cityArr[province.value]);
};
var country = document.getElementById("country");
city.onchange = function(){
country.options.length = 0;
createOption(country,countryArr[province.value][city.value]);
};
province.onchange = function(){
city.options.length = 0;
createOption(city,cityArr[province.value]);
if(province.value >= 0){
city.onchange();
}else{
country.options.length = 0;
}
};
</script>
</body>
</html>
----------------------------------------------------数组---------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>数组</title>
</head>
<body>
<script text="text/javascript">
var arr = [1,2,3,4,2,5,6,2,7,2];
document.write("原数组为:"+ arr);
document.write("<br/><br/>");
document.write("移除2后的新数组为:");
for(var i=0;i<arr.length;i++){
if(arr[i]!=2){
document.write(arr[i]+",");
}
}
</script>
</body>
</html>
------------------------------------------change按钮------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>数组</title>
</head>
<body>
<script text="text/javascript">
var arr = [1,2,3,4,2,5,6,2,7,2];
document.write("原数组为:"+ arr);
document.write("<br/><br/>");
document.write("移除2后的新数组为:");
for(var i=0;i<arr.length;i++){
if(arr[i]!=2){
document.write(arr[i]+",");
}
}
</script>
</body>
</html>
----------------------------------------------感想----------------------------------------------------
在打代码的过程中总会出现一些小问题
照书上打的代码很多也不太能理解,要花上好多时间去学习了解
打完了的代码也还有点小瑕疵