在下拉選擇列表時(shí),我們經(jīng)常要對(duì)其中的選項(xiàng)進(jìn)行操作,例如添加選項(xiàng)、刪除選項(xiàng)、移動(dòng)和重新排序等操作,接下來(lái)由南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端開(kāi)發(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è)新的
第二種方式是使用 Option 構(gòu)造函數(shù)來(lái)創(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è)
var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); //在 IE8及之前版本中有問(wèn)題
這種方式在除 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ù),因此要想編寫(xiě)跨瀏覽器的代碼,就不能只 傳入一個(gè)參數(shù)。這時(shí)候,為第二個(gè)參數(shù)傳入 undefined,就可以在所有瀏覽器中都將新選項(xiàng)插入到列 表后了。來(lái)看一個(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ò)公司前端開(kāi)發(fā)工程師提配大家也不一定要為選項(xiàng)指定值。換句話(huà)說(shuō),只為 Option 構(gòu)造函數(shù)傳入一個(gè)參數(shù)(選項(xiàng)的文本)也沒(méi)有問(wèn)題。
移除選項(xiàng)
與添加選項(xiàng)類(lèi)似,移除選項(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è)過(guò)程要 涉及從第一個(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è)選擇框中的過(guò)程。
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)次序的過(guò)程也十分類(lèi)似,好的方式仍然是使用 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)是通用的。類(lèi)似地,可以使用下列代碼將選擇框中的選項(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è)頁(yè)面重繪問(wèn)題,有時(shí)候會(huì)導(dǎo)致使用 DOM 方法重排的選項(xiàng)不能馬上 正確顯示。
本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://m.gimmickmag.com/ 如轉(zhuǎn)載請(qǐng)注明出處!