【jQuery】示例3：两层的关联下拉框

今天终于完成了jQuery的一个确实有用的示例：两层的关联下拉框（2 Level Cascading Dropdown list）。示例见此处。

开始，我以为很简单。但是经过实战，还是有一些些小的技巧需要注意。

JSON的返回值是一个问题。在这个示例中，由于我并不关注返回值的问题（这个问题将在示例4中进一步研究），所以我只是简单返回一个字符串的数组。

我遇到的第二个问题，是如何给select加option的问题。开始我用如下的代码：

var opt=document.createElement(option);
opt.value=n;
opt.text=i;
$(select).filter(#level1).append(opt);

这样做，在Fx下是可以了，但是在IE下不行：option加入正常，但是没有文本显示。所以，我采用更标准的JavaScript写法：

var opt=new Option(Option +i, n);
document.getElementById(level2).options.add(opt);

于是，Fx和IE都正常了……世界终于清净了……

还没有完。每次我点击或者在level1中更改选项时，level1和level2都会不断的增加option，我需要在增加之前将原来的option进行清除。于是我再次借用标准的JavaScript：

function clearOption(selectID)
  {
      var obj;
      obj=document.getElementById(selectID);
      var i;
      for(i=1;i<obj.length i--="" obj.remove="">

这里有一些技巧。我故意用一种比较笨的方法：从1（不是0，因为从0开始会把那个—的选项一起删除了）开始循环到options数组的长度。但是由于每次删除一个选项后，长度就会减1，且原来1的项目删除后，原来2的项目变成了1，所以，我必须用i–将i缩小一次。更好的方法是从最后一个元素开始删除，每次也只删除最后一个元素。有兴趣的可以自己完成。

这个代码是我在NetBeans IDE下完成的。它对jQuery支持的很好，有jQuery的代码提示，省去我遍寻API的烦恼。