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

添加選項(xiàng)

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

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

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

selectbox.appendChild(newOption);

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

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

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

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

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

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

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

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

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

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

移除選項(xiàng)

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

selectbox.removeChild(selectbox.options[0]); //移除第一個(gè)選項(xiàng)

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

selectbox.remove(0); //移除第一個(gè)選項(xiàng)

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

selectbox.options[0] = null; //移除第一個(gè)選項(xiàng)

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

function clearSelectbox(selectbox){

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

selectbox.remove(i);

}

}

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

移動(dòng)和重排選項(xiàng)

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

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

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

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

移動(dòng)選項(xiàng)與移除選項(xiàng)有一個(gè)共同之處，即會(huì)重置每一個(gè)選項(xiàng)的 index 屬性。

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

var optionToMove = selectbox.options[1];

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

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

var optionToMove = selectbox.options[1];

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

以上代碼適用于選擇框中的所有選項(xiàng)，包括后一個(gè)選項(xiàng)。

IE7 存在一個(gè)頁面重繪問題，有時(shí)候會(huì)導(dǎo)致使用 DOM 方法重排的選項(xiàng)不能馬上 正確顯示。

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