select标签的兼容性问题

注：题目可能起的不恰当。我对网页编程没什么经验，想不出一个合适的题目来说明问题。

我们这次的《分布计算》课程的作业中的第二部分，是让我们实现一个简陋的分布式任务管理软件。要求是打开网页后，上面显示目前被分配了任务的用户列表，点击用户名称后，会显示这个用户目前的所有任务，这部分要求在不刷新网页的情况下完成，也就是用AJAX技术。然后要让使用者可以添加任务，如果也可以用AJAX实现则有加分。题目只要求必须能在firefox中正常使用（也就是说不需要处理IE6的ActiveX）。

之前我对网页的理解只限于HTML和CSS的阶段，看了题目要求有些怕怕的。我大概在上周四开始尝试，但在XML文件解析那一步不得要领，在上周五终于通过自己写了一个简单的例子搞懂了如何解析XML。并完成了用户列表的部分，可以在点击用户后显示用户的ID。在昨天完成了显示任务的部分，通过得到的用户ID来获取对应的task，并生成表格。

看似进展顺利，但我心中还是有根刺──在实现用户列表的时候，我就发现在Safari下可以正常工作的程序，在firefox下就不行。当点击用户名称后，应该达到的情况是在列表下面显示用户ID。这在Safari下可以，但在Firefox下则显示undefined。因为我对FireBug不太熟悉，而Safari 4的Develop菜单下的调试工具相当直观，一下子就显示出我的javascript程序中的错误，而且在Mac下Safari比Firefox快一些，所以我从一开始就用Safari测试的。本以为Firefox的兼容性出色，Safari对标准支持的也不错，在Safari下测试通过后在Firefox下应该没问题，没想到竟然出了这种状况。当时我百思不得其解，只好先不管这一块，在Safari下继续开发测试。

到了昨天晚上显示任务列表的部分也完成了后，我又再Firefox下测试了一下，还是老样子。当时我还在学校的电脑上用IE7测试了一下，居然也完全正常，当时就直接崩溃了。然后我绝望的发现，老师给我们的例子和我有一样的情况。

那个例子通过一些音乐的播放列表来选择歌曲，并在用户点击相应的歌曲后，在下面显示歌曲的发行日期、风格、售价之类的信息。这个例子在Safari下工作很正常，但在Firefox下，当点击歌曲后，下面显式的是“n/a”。查看页面的源代码后，我发现例子中通过select标签来选择歌曲，并设定了onchange属性，给处理函数发送一个event，然后处理函数通过这个event来获得选择的结果。而出现“n/a”的情况，正好是处理函数中判断event为null的情况。我的程序就是这么实现的，例子程序都错了，让我怎么解决！想到周一晚上就要交这份作业，就算给老师发邮件指出错误，他能不能即时改动还不好说，我当时有点绝望，只好先回家。

今天早上起的莫名其妙的早，6点多一点就起来了，而在周末学校的自习咖啡厅在12点才开门。我在看完了Google Reader、通过Twitter和国内同学扯了点淡、刷完牙、洗完澡后，实在没事可作，就想着看看能不能解决一下昨天的问题。于是就在Google上搜索“ajax example”，找到了这个页面，然后就一页一页的看代码。当我看到AJAX Database Example这一页时，发现例子中也用到了select标签，里面用到了和我不一样的语法。打开TextMate，写一个小的页面测试一下，Safari和Firefox都显示正常了！于是就修改了我的源程序，在Firefox下终于也正常了。

过去我用的方法是这样的：通过“<select size="10" onchange="showTask(evt)">”标签来生成选择框，然后在处理函数中接受evt作为参数，通过下面两条语句处理：

中间判断evt和selection的空值情况，然后selection中就是option标签里value的属性值了。例子程序中也是这么写的，在Safari和IE7下也工作正常。而改动后的程序反而简单了，select标签改为“<select size="10" onchange="showTask(this.value)">”，然后showTask收到的参数直接就是option标签中value的属性值了。

搞定了这一部分，对今天完成整个程序更有信心了。