试译《Ajax in Action》第四部分(六)

9．4 提交结果

现在，数据库查询的结果在一个XML文档中，我们将使用Javascript 的DOM API操作其元素。通过调用getElementByTagName()函数，我们可轻松地跳到一个特定元素。这个函数使用元素名在DOM中查找，有点像一个老式Rolodex上突出的字母标签。由于在一个XML文档中多个元素可以有一样的名称，实际上,getElementByTagName()返回一个元素数组，顺序如它们在文档中显示的。

9．4．1 操作XML文档

现在我们将完成客户端脚本，把选项添加到选择列表里。表单名称和选择元素同所有有效的选项一起在XML文档中被指定。为了找到选项并把它们插入到select元素中，我们需要遍历此文档的元素。

一旦内容装载机从服务器收到XML文档，它将调用FillDropDown() 函数，如果清单9.2所示。在FillDropDown()中，我们浏览XML文档的entry元素，并为每一个entry元素创建一个新的Option对象。这些Option对象代表将要添加到选择列表中的文本/值对。清单9.5完整地显示了FillDropDown()函数。

 

一旦收到并解析服务器的XML响应，FillDropDwon()函数就被内容装载机调用。在FillDropDown内部，通过this引用内容装载机对象很方便，我们用它获取响应文档，responseXML。一旦拥有一个响应的documentElement的引用1，我们就可开始使用JavaScript的DOM函数来操作它的节点。我们想要得到的第一个信息是目标select列表，我们要往里面添加新选项。我们用getElementByTagName()查找名为selectElement的元素，获得所返回数组的首项。我们可以操作它的子节点2。第一个子节点含有表单名称，第二个子节点含有select列表名称。

我们使用这两个值引用目标选择列表自身3，并通过把它的选项数组长度设置为0来清除任何现存的选项。现在，我们可以往列表里添加新选项了。我们需要访问XML文档的entry元素，所以我们再次调用getElementByTagName()。这次我们需要遍历它返回的元素数组，从每一个元素里获取文本和值对4。每个entry的第一个子节点是将要显示给用户的选项文本，第二个子节点是值。一旦获得这两个值，我们创建一个新Option对象，传入选项文本作为第一个构造器参数，选项值作为第二个参数。然后，新选项被添加到目标select元素，重复这个过程直到所有新选项添加完。select.add()的方法签名因浏览器而不同，所以我们用try…catch语句查找哪个合适。到此我们已经完成了双组合框的代码。现在，我们可以加载HTML页面，选择一个区，并可看到第二个下拉列表从数据库中直接被填充。

图9.7显示了实战中的双组合列表。在这个示例中，第一个列表中的东部区被选定，相应的范围被从数据库里检索，并显示在第二个列表中。然后，南部区被选定，与它相应的范围填充在第二个列表中。

如你在图9.7所见，我们还有一项工作要做：改变选择列表的外观使其更吸引人。当被填入选项时，第二个选择列表的大小增加。我们可以运用一个级联样式表的规则，控制元素大小的转变。

9．4．2运用级联样式表

级联样式表允许选择元素可视属性变化。我们可以改变字体颜色，字体种类，元素的宽度等等。在图9.7种我们看到第二个select元素最初只有几个像素，因为它里面没有选项。当第一个选择列表的东部区被选中后，第二个select元素扩展了。大小的改变有一个视觉的震动，给用户产生一种不愉快地经验。

解决这个问题的方法是为选择列表设置一个宽度：

<select name="ddlTerritory" style="width:200px"></select>

然而，仍然有一个问题，如果有一个要显示的值长于我们设置的宽度。在Firefox中，当元素是重点时，下拉列表下的选项会扩展以显示完整的文本。但是在微软IE中，文本被截断，用户看不清，如图9.8所示。

为了避免IE中的这个问题，我们需要把选择列表的宽度设置为最长选项的宽度。大部分时间，决定显示内容所需要的像素数的唯一方法是试错。一些开发商在他们CSS中使用特定浏览器的标记（hacks），仅为IE设置更大的宽度：

style="width:100px;_width:250px"

IE识别带下划线的宽度，而其他的浏览器忽略它。因此，IE的选择框是250像素宽，其他浏览器选择框宽度是100像素。但是像这种依赖于浏览器错误的做法是不可取的，因为在未来的浏览器版本中它们可能会被修正，从而破坏你的网页显示方式。

 

     现在，让我们看看更多为双组合脚本添加高级特征的方法。