今天又是无聊的一天，我的脑袋一直在嗡嗡叫，想着一些奇怪的问题，比如我为什么总是感到这么失落，为什么我喜欢的女孩不喜欢我呢，真是头大啊。不过既然有作业了我这个五好公民当然要认真写了。没时间让我思考这么复杂的问题了，还是作业简单点。
好了，我应该看看今天要做些什么了。看了题目就吓到我了，“三级联动”是什么啊，是JS里面的专有名词吗？也许吧，不过后来想起了上课老师好像让我们做过这个题目，只是我们的教材给她取了一个特殊的名字，教材作者有心了。还有第4个题目老师让我们写写感谢，不知道每次实训报告最难的部分就是感谢部分吗？这里我可能要想很久了。让我们来看看这些题目是什么吧。首先第一个题目就是关于“三级联动”的题目，第二个题目是一个关于数组的题目看起来还是比较友好的。最后这第三个题目就离谱了啊，因为我明明记得div标签是没有语义的啊，后来一想没有语义的标签就没有边框了吗？也未必吧。下面是老师布置的本次作业的题文，及我的解答。
题文：
1、完成省城市的三级联动（包括湖南省），附代码和效果图。 2、移出数组arr（[1,2,3,4,2,5,6,2,7,2]）中与2相等的元素，并生成一个新数组，不改变原数组。 3、编写函数实现单击change按钮，为div元素添加红色双线的边框。 4、谈谈本次实训的感想：在实训中遇到了一些什么问题，如何解决的？ |
对于问题一，我之前写过一个邮箱注册的模拟程序，其中有一个选择地区的模块，里面就有三级联动的操作，我当时是完成了这个功能，但是代码冗长，可读性很差。今天这个题目和那天是如此的相似，我不会又要熬夜了吧，应该不会吧，我记得书上是有代码的啊，此刻我默默的拿出了教材，你们以为我要“白嫖”吗？没事，我先学习一下编者的伟大思想，这样我以后才能写出更炫酷的代码嘛。好了，我翻到了，以下是教材的编者给出的代码。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>MyHtml2.html</title>
5
6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7 <meta http-equiv="description" content="this is my page">
8 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
11
12 </head>
13
14 <body>
15 <select id="province">
16 <option value="-1">请选择</option>
17 </select>
18 <select id="city"></select>
19 <select id="country"></select>
20 <script>
21 var provinceArr=['上海','江苏','河北'];
22 var cityArr=[
23 ['上海市'],
24 ['苏州市','南宁市','扬州市'],
25 ['石家庄','秦皇岛','张家口']
26 ];
27 var countryArr=[
28 [
29 ['黄浦区','静安区','长宁区','浦东区']
30 ],[
31 ['虎丘区','吴中区','长宁区','相城区','姑苏区','吴江区'],
32 ['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
33 ['干江区','广陵区','江都区']
34 ],[
35 ['长安区','桥西区','新华区','井陉矿区'],
36 ['海港区','山海关区','北戴河区','抚宁区'],
37 ['桥东区','桥西区','宣化区','下花园区']
38 ]
39 ];
40 function createOption(obj,data){
41 for(var i in data){
42 var op=new Option(data[i],i);
43 obj.options.add(op);
44 }
45 }
46 var province=document.getElementById('province');
47 createOption(province,provinceArr);
48
49 var city=document.getElementById('city');
50 province.onchange=function(){
51 city.options.length=0;
52 createOption(city,cityArr[province.value]);
53
54 if(province.value>=0){
55 city.onchange();
56 }else{
57 country.options.length=0;
58 }
59 };
60
61 var country=document.getElementById('country');
62 city.onchange=function(){
63 country.options.length=0;
64 createOption(country,countryArr[province.value][city.value]);
65 }
66 </script>
67 </body>
68 </html> 这个编者还是很厉害的啊。这流畅的思路再加上行云流水的笔法，着实让我非常羡慕。不过膜拜归膜拜，我总得从中学到点什么吧。那我们一起看看这个代码吧。首先创建下拉菜单，并给下拉菜单给一个id都不用多说了，其中有一个地方的处理就非常的微妙了，在第一个下拉菜单的地方默认是加了一个选项的，并且把value的值置成了-1，这为后面实现联动埋下了伏笔。后面的三组数组中，把相互对应体现的非常好，具体过程我们可以参考如下：
可以发现在编者的代码中这样的对应关系也非常好，当然这么做也是有很强的目的性的，接下来一个至关重要的函数就登场了。
这个函数在这个程序中被重复使用了多次，大大缩短了代码量增加了程序的可读性，这一点非常值得我去学习。第1次是用来生产省份的下拉菜单，第2次是生成直辖市和自治区的下拉菜单，最后就是生成区域的下拉菜单了。当然后两者为了配合联动还要做一些必要的处理，我们接着往下看。
下面是为省份下拉菜单添加点击事件的代码：
可以看到第3行在调用createOption函数时的第二个参数是province.value如果省份下拉菜单里没有选择任何省份的话这个值就是-1了，当然也就不会引起后面的联动了。至于上图中再接下来的代码就是处理区域菜单的更新了，有了这些你在修改省份的时候就可以及时的去更新区域信息了。
程序运行的时候是这个样子的：
对于问题二，我想说对于学了这么就程序设计的同学来说都不是问题了吧，起码算法的实现大部分人都可以很好的理解了，就是可能对JS语言不太熟悉，所以一时不知道该怎么做吧。下面是我本人的代码过程：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Document</title>
6 </head>
7 <body>
8 <script>
9 var arr=[1,2,3,4,2,5,6,2,7,2]; //待处理数组
10 var result=new Array(); //创建一个空数组，用于存储arr数组里除了2之外的其他数据
11 for (var i=0,j=0;i<arr.length;i++) {
12 if(arr[i]!=2){
13 result[j++]=arr[i];
14 }
15 }
16 //输出最终结果
17 for(var i of result){
18 document.write(i+" ");
19 }
20 </script>
21 </body>
22 </html>算法过程如下：
我在遍历数组的时候用的是for...of...方法，也可以用for...in...方法实现：
1 for(var i in result){
2 document.write(result[i]+" ");
3 }这是运行的结果：
终于到问题三了，我马上就可以解放了，这个div的边框颜色还是让我百度了一点点时间的，好在找到了，以下代码是我参考着写出的代码，优化了一些内容。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MyXhtml2.xhtml</title>
<meta http-equiv="keywords" content="enter,your,keywords,here" />
<meta http-equiv="description" content="A short description of this page." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--<link rel="stylesheet" type="text/css" href="styles.css">-->
<style>
width:200px;
height:200px;
background:blue;
margin-bottom:20px;
</style>
</head>
<body>
<div id="div">龙猫</div>
<button onclick="change()">改变边框颜色</button>
<script>
var i=0;
function change(){
i++;
var div=document.getElementById('div');
if(i%2==0)
div.style.border='1px double red';
else
div.style.border='';
}
</script>
</body>
</html>我的按钮是可以一直点击的，点击一次变一次色，是不是很神奇？
大概就像这样的
先点一次：
再点一次：
终于写完了。哦，差点忘了，对于问题四，我的整篇文章就有很多感谢了不是吗？不过我不知道把这个写完了又该继续做什么了，不知道脑袋会不会继续嗡嗡叫，不过总算做完一件事情了。
