有了两层关联下拉框的经验,实现三层的关联下拉框确实很容易。
当然,为了被前令狐同学再次BS我的算法BT,我首先改写了clearOptions函数:
function clearOptions(selectID)
{
var sel=document.getElementById(selectID);
var len=sel.length;
var i;
for(i=1;i<len;i++)
sel.remove(1); // I keep on removing the 1st item in the select!
}
说明一下,我这样编程是有一定的道理的。虽然说,更“好”的代码应该似乎是每次都删除最后一个(类似:remove(sel.length))。但是,由于每次删除后,sel.length都会发生变化,所以在每次删除最后一个的时候,sel.length都会被重新取值,这个对于jQuery来说开销还是很大的,特别是如果select下的option比较多的时候。所以,我还是选择每次删除第一个的做法。这样,remove(1)中的参数是个常量,只需要取值一次从而大大的缩减了运行时间。
同时我将addOption,fillLevel等多次调用的代码段抽出作为独立的函数。在fillLevel函数中,还特意混合了jQuery和标准javascript。
这样一来,jQuery的ready函数写法就更清晰明了了。同时,为了温故知新,我还加入了在第二个例子中实现的“Loading”提示。目前的问题时,在填充level1的时候,不会出现这个提示,而只有在填充level2和level3的时候才出现这个提示。暂时不管这个小小的问题了。
完整的示范在此处。
代码不再贴出,有兴趣的可以在页面自行下载研究。