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

添加選項

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

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

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

selectbox.appendChild(newOption);

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

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

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

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

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

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

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

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

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

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

移除選項

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

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

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

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

后一種方式，就是將相應選項設置為 null。這種方式也是 DOM 出現之前瀏覽器的遺留機制。 例如：

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

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

function clearSelectbox(selectbox){

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

selectbox.remove(i);

}

}

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

移動和重排選項

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

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 方法重排的選項不能馬上 正確顯示。

本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣大技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡 http://www.51yjwy.com/ 如轉載請注明出處!