| 導購 | 订阅 | 在线投稿
分享
 
 
 

給select控件在指定位置插入option(javascript)

來源:互聯網  2008-08-29 06:39:49  評論

問題描述

對于select控件 1 2 3,我們可以通過它的options.add(new Option(v,t))的方法動態的插入一個option選項,但是新增的option的位置只能在最後,卻不能插入到指定的任意位置。

解決方法

既然select的options屬性提供的方法無法實現上面的需求,那麽只好找辦法了。我們知道html控件都有一個insertBefore的方法,用以在指定位置插入子控件,這個方法也許可以使用,不妨測試一下,呵呵,真的可以。不過對于IE和firefox,還是有細節的差別。

浏覽器兼容

對于FireFox,我們可以直接使用 selectCtl.insertBefore(new Option('value', 'text'), selectCtl.options[i]);這樣的簡單的形式在制定位置插入option,但是IE好像不行,需要使用下面的形式才可以

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

option.value = 'value';

option.innerText = 'text';

selectCtl.insertBefore(option, selectCtl.options[i]);

完整代碼(firefox3.01,IE7測試通過)

function addAt(selectCtl,optionValue,optionText,position)

{

var userAgent = window.navigator.userAgent;

if (userAgent.indexOf("MSIE") > 0) {

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

option.value = optionValue;

option.innerText = optionText;

selectCtl.insertBefore(option, selectCtl.options[position]);

}

else

selectCtl.insertBefore(new Option(optionValue, optionText), selectCtl.options[position]);

}

更好的方法

上面使用增加一個新的javascript函數來解決問題, 我們還可以通過javascript中的prototype屬性來完成,這樣就可以給select控件增加一個新的擴展方法addOptionAt,使用 selectCtl.addOptionAt(new Option('v','t'),position)這種簡潔的方式來編程了,我還沒有寫,所以不能給出代碼了。

問題描述 對于select控件 1 2 3,我們可以通過它的options.add(new Option(v,t))的方法動態的插入一個option選項,但是新增的option的位置只能在最後,卻不能插入到指定的任意位置。 解決方法 既然select的options屬性提供的方法無法實現上面的需求,那麽只好找辦法了。我們知道html控件都有一個insertBefore的方法,用以在指定位置插入子控件,這個方法也許可以使用,不妨測試一下,呵呵,真的可以。不過對于IE和firefox,還是有細節的差別。 浏覽器兼容 對于FireFox,我們可以直接使用 selectCtl.insertBefore(new Option('value', 'text'), selectCtl.options[i]);這樣的簡單的形式在制定位置插入option,但是IE好像不行,需要使用下面的形式才可以 var option = document.createElement("option"); option.value = 'value'; option.innerText = 'text'; selectCtl.insertBefore(option, selectCtl.options[i]); 完整代碼(firefox3.01,IE7測試通過) function addAt(selectCtl,optionValue,optionText,position) { var userAgent = window.navigator.userAgent; if (userAgent.indexOf("MSIE") > 0) { var option = document.createElement("option"); option.value = optionValue; option.innerText = optionText; selectCtl.insertBefore(option, selectCtl.options[position]); } else selectCtl.insertBefore(new Option(optionValue, optionText), selectCtl.options[position]); } 更好的方法 上面使用增加一個新的javascript函數來解決問題, 我們還可以通過javascript中的prototype屬性來完成,這樣就可以給select控件增加一個新的擴展方法addOptionAt,使用 selectCtl.addOptionAt(new Option('v','t'),position)這種簡潔的方式來編程了,我還沒有寫,所以不能給出代碼了。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有