在下拉選擇列表時，我們經(jīng)常要對其中的選項進行操作，例如添加選項、刪除選項、移動和重新排序等操作，接下來由南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端開發(fā)工程師依次介紹具體操作辦法。

添加選項

可以使用 JavaScript 動態(tài)創(chuàng)建選項，并將它們添加到選擇框中。添加選項的方式有很多，第一種方 式就是使用如下所示的 DOM方法。

var newOption = document.createElement("option");

newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value", "Option value");

selectbox.appendChild(newOption);

以上代碼創(chuàng)建了一個新的元素，然后為它添加了一個文本節(jié)點，并設(shè)置其 value 特性， 后將它添加到了選擇框中。添加到選擇框之后，用戶立即就可以看到新選項。

第二種方式是使用 Option 構(gòu)造函數(shù)來創(chuàng)建新選項，這個構(gòu)造函數(shù)是 DOM出現(xiàn)之前就有的，一 直遺留到現(xiàn)在。Option 構(gòu)造函數(shù)接受兩個參數(shù)：文本(text)和值(value);第二個參數(shù)可選。 雖然這個構(gòu)造函數(shù)會創(chuàng)建一個 Object 的實例，但兼容 DOM的瀏覽器會返回一個元素。 換句話說，在這種情況下，我們?nèi)匀豢梢允褂?appendChild()將新選項添加到選擇框中。來看下面 的例子。

var newOption = new Option("Option text", "Option value");

selectbox.appendChild(newOption); //在 IE8及之前版本中有問題

這種方式在除 IE 之外的瀏覽器中都可以使用。由于存在 bug，IE 在這種方式下不能正確設(shè)置新選 項的文本。

第三種添加新選項的方式是使用選擇框的 add()方法。DOM規(guī)定這個方法接受兩個參數(shù)：要添加 的新選項和將位于新選項之后的選項。如果想在列表的后添加一個選項，應(yīng)該將第二個參數(shù)設(shè)置為 null。在 IE對 add()方法的實現(xiàn)中，第二個參數(shù)是可選的，而且如果指定，該參數(shù)必須是新選項之后 選項的索引。兼容 DOM的瀏覽器要求必須指定第二個參數(shù)，因此要想編寫跨瀏覽器的代碼，就不能只 傳入一個參數(shù)。這時候，為第二個參數(shù)傳入 undefined，就可以在所有瀏覽器中都將新選項插入到列 表后了。來看一個例子。

var newOption = new Option("Option text", "Option value");

selectbox.add(newOption, undefined); //最佳方案

在 IE和兼容 DOM的瀏覽器中，上面的代碼都可以正常使用。如果你想將新選項添加到其他位置(不 是后一個)，就應(yīng)該使用標準的 DOM技術(shù)和 insertBefore()方法。

就和在 HTML中一樣，此時南昌網(wǎng)絡(luò)公司前端開發(fā)工程師提配大家也不一定要為選項指定值。換句話說，只為 Option 構(gòu)造函數(shù)傳入一個參數(shù)(選項的文本)也沒有問題。

移除選項

與添加選項類似，移除選項的方式也有很多種。首先，可以使用 DOM 的 removeChild()方法， 為其傳入要移除的選項，如下面的例子所示：

selectbox.removeChild(selectbox.options[0]); //移除第一個選項

其次，可以使用選擇框的 remove()方法。這個方法接受一個參數(shù)，即要移除選項的索引，如下面 的例子所示：

selectbox.remove(0); //移除第一個選項

后一種方式，就是將相應(yīng)選項設(shè)置為 null。這種方式也是 DOM 出現(xiàn)之前瀏覽器的遺留機制。 例如：

selectbox.options[0] = null; //移除第一個選項

要清除選擇框中所有的項，需要迭代所有選項并逐個移除它們，如下面的例子所示：

function clearSelectbox(selectbox){

for(var i=0, len=selectbox.options.length; i < len; i++){

selectbox.remove(i);

}

}

這個函數(shù)每次只移除選擇框中的第一個選項。由于移除第一個選項后，所有后續(xù)選項都會自動向上 移動一個位置，因此重復移除第一個選項就可以移除所有選項了。

移動和重排選項

在 DOM標準出現(xiàn)之前，將一個選擇框中的選項移動到另一個選擇框中是非常麻煩的。整個過程要 涉及從第一個選擇框中移除選項，然后以相同的文本和值創(chuàng)建新選項，后再將新選項添加到第二個選 擇框中。而使用 DOM 的 appendChild()方法，就可以將第一個選擇框中的選項直接移動到第二個選 擇框中。我們知道，如果為 appendChild()方法傳入一個文檔中已有的元素，那么就會先從該元素的 父節(jié)點中移除它，再把它添加到指定的位置。下面的代碼展示了將第一個選擇框中的第一個選項移動到 第二個選擇框中的過程。

var selectbox1 = document.getElementById("selLocations1");

var selectbox2 = document.getElementById("selLocations2");

selectbox2.appendChild(selectbox1.options[0]);

移動選項與移除選項有一個共同之處，即會重置每一個選項的 index 屬性。

重排選項次序的過程也十分類似，好的方式仍然是使用 DOM方法。要將選擇框中的某一項移動 到特定位置，合適的 DOM 方法就是 insertBefore();appendChild()方法只適用于將選項添加 到選擇框的后。要在選擇框中向前移動一個選項的位置，可以使用以下代碼：

var optionToMove = selectbox.options[1];

selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);

以上代碼首先選擇了要移動的選項，然后將其插入到了排在它前面的選項之前。實際上，第二行代 碼對除第一個選項之外的其他選項是通用的。類似地，可以使用下列代碼將選擇框中的選項向后移動一 個位置。

var optionToMove = selectbox.options[1];

selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index+2]);

以上代碼適用于選擇框中的所有選項，包括后一個選項。

IE7 存在一個頁面重繪問題，有時候會導致使用 DOM 方法重排的選項不能馬上 正確顯示。

本文僅限內(nèi)部技術(shù)人員學習交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://m.51yjwy.com/ 如轉(zhuǎn)載請注明出處!