最近在看一本書,，Wrox.Professional JavaScript™ for Web Developers,，是老趙在他的Ajax深入淺出系列講座中提到過的一本書,。其實這本書一直都在我的電腦里，只是沒認(rèn)真看過,。一直沒怎么很正式的學(xué)習(xí)過javascript，偶爾用到的時候就到網(wǎng)上找些代碼，改吧改吧就用了,，這次從頭開始學(xué)起，細(xì)細(xì)看下來,，還真是有不少收獲,，甚至有點喜歡上javascript了。

      現(xiàn)在步入正題,，看到書中講Form元素的操作,，像Textbox,、Button、Label等,，都還是比較簡單的,，只是看到Select時，稍微有些復(fù)雜,，于是就想仔細(xì)研究研究,，于是就有了這篇文章。Select的操作包括動態(tài)添加,、刪除,、移動、獲取選中項的值,、排序等等,，現(xiàn)在一一講述。

1,、向Select里添加Option

//IE only,FF不支持Add方法
function fnAddItem(text,value)
        {
            var selTarget = document.getElementById("selID");

            selTarget.Add(new Option("text","value"));
        }

//IE FF both OK
function fnAdd(oListbox, sName, sValue) 
        {
            var oOption = document.createElement("option");
            oOption.appendChild(document.createTextNode(sName));

            if (arguments.length == 3) 
            {
                oOption.setAttribute("value", sValue);
            }

            oListbox.appendChild(oOption);
        }

2,、刪除Select里的Option

function fnRemoveItem()
        {
            var selTarget = document.getElementById("selID");

            if(selTarget.selectedIndex > -1) 
            {//說明選中
                for(var i=0;i<selTarget.options.length;i++)
                {
                    if(selTarget.options[i].selected)
                    {
                        selTarget.remove(i);
                        
                        i = i - 1;//注意這一行
                    }
                }
            }
        } 

3、移動Select里的Option到另一個Select中

        function fnMove(fromSelectID,toSelectID)
        {
            var from = document.getElementById(fromSelectID);
            var to = document.getElementById(toSelectID);
            
            for(var i=0;i<from.options.length;i++)
            {
                if(from.options[i].selected)
                {
                    to.appendChild(from.options[i]);
                    i = i - 1;
                }
            }
        }

  var op = from.options[i];
  to.options.add(new Option(op.text, op.value));
  from.remove(i);

4,、Select里Option的上下移動

        function fnUp()
        {   
            var sel = document.getElementById("selID");
            for(var i=1; i < sel.length; i++)
            {//最上面的一個不需要移動,，所以直接從i=1開始
                if(sel.options[i].selected)
                {
                    if(!sel.options.item(i-1).selected)
                    {//上面的一項沒選中，上下交換
                          var selText = sel.options[i].text;
                          var selValue = sel.options[i].value;
                          
                          sel.options[i].text = sel.options[i-1].text;
                          sel.options[i].value = sel.options[i-1].value;
                          sel.options[i].selected = false;
                          
                          sel.options[i-1].text = selText;
                          sel.options[i-1].value = selValue;
                          sel.options[i-1].selected=true;
                    }
                }
            }
        }

                        var oOption = sel.options[i]
                        var oPrevOption = sel.options[i-1]
                        sel.insertBefore(oOption,oPrevOption);

function fnDown()
        {
            var sel = fnGetTarget("selLeftOrRight");
            for(var i=sel.length -2; i >= 0; i--)
            {//向下移動，最后一個不需要處理,，所以直接從倒數(shù)第二個開始
                if(sel.options.item(i).selected)
                {
                    if(!sel.options.item(i+1).selected)
                    {//下面的Option沒選中,，上下互換
                          var selText = sel.options.item(i).text;
                          var selValue = sel.options.item(i).value;
                          
                          sel.options.item(i).text = sel.options.item(i+1).text;
                          sel.options.item(i).value = sel.options.item(i+1).value;
                          sel.options.item(i).selected = false;
                          
                          sel.options.item(i+1).text = selText;
                          sel.options.item(i+1).value = selValue;
                          sel.options.item(i+1).selected=true;
                    }
                }
            }
        }

5、Select里Option的排序

function fnCompare(a,b)
        {
            if (a < b)
                return -1;
            if (a > b)
                return 1;
            return 0;
        }
var arr = new Array();
//add some value into arr
arr.sort(fnCompare);
//這里sort的操作結(jié)果就是arr里的項按由小到大的升序排序
//如果把fnCompare里改為
//if (a < b)
//  return 1;
//if (a > b)
//  return -1;
//return 0;
//則sort的結(jié)果是降序排列

//因為排序可以按Option的Value排序,，也可以按Text排序，這里只演示按Value排序
function sortItem()
{
    var sel = document.getElementById("selID");
    var selLength = sel.options.length;
    var arr = new Array();
    var arrLength;

    //將所有Option放入array
    for(var i=0;i<selLength;i++)
    {
        arr[i] = sel.options[i];
    }
    arrLength = arr.length;

    arr.sort(fnSortByValue);//排序
    //先將原先的Option刪除
    while(selLength--)
    {
        sel.options[selLength] = null;
    }
    //將經(jīng)過排序的Option放回Select中
    for(i=0;i<arrLength;i++)
    {
        fnAdd(sel,arr[i].text,arr[i].value);
        //sel.add(new Option(arr[i].text,arr[i].value));
    }
}
function fnSortByValue(a,b)
{
    var aComp = a.value.toString();
    var bComp = b.value.toString();

    if (aComp < bComp)
        return -1;
    if (aComp > bComp)
        return 1;
    return 0;
}

排序時還可以有更多選項,，比如將value值看做Integer或是String進(jìn)行排序,，得到的結(jié)果是不一樣的。篇幅限制,，不在多做介紹,。
我將這些所有的操作都寫在了一個文件里，運行的效果如圖（點擊看大圖）

有興趣的朋友可以下載來看看,，里面還設(shè)計div+css排版等。
Download
============================================================

終于寫完了,，洗洗睡
========================
改了一下,，現(xiàn)在FF下工作正常