生活在远方

是的,因为真正的生活是在远方

【jQuery】示例4:三层的关联下拉框

Written By: tr - Dec• 14•08

有了两层关联下拉框的经验,实现三层的关联下拉框确实很容易。

当然,为了被前令狐同学再次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的时候才出现这个提示。暂时不管这个小小的问题了。

完整的示范在此处

代码不再贴出,有兴趣的可以在页面自行下载研究。

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Comments

  1. 令狐虫 says:

    真是太BT了太BT了。
    这种删法如果sel是一个静态数组的实现的话,效率是超低的(比每次调用str.length还要低,因为可能每删一次都要将后面的元素逐个前移)

    事实上,一般我们的实现都是这样的:

    for (i = len; i >= 1; --i)
    {
        sel.remove(i);
    }
    

    看,一个多余的函数调用也没有……

  2. tr says:

    靠,又被前令狐BS了……

    当然,前令狐的算法是更对的……

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">