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

問題描述

對于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)這種簡潔的方式來編程了,我還沒有寫,所以不能給出代碼了。

mshtml:javascript爲HTML文件中的Select添加option
原文地址: 使用結合MSHTML與WebBrowser生成美觀實用的WinForm應用程序(By Lostinet)中介紹的方法寫程序時遇到的一個問題的解決方法。在AxSHDocVw.AxWebBrowser控件加載的HTML文件中有一個Select,希望動態從數據庫中...查看完整版>>mshtml:javascript爲HTML文件中的Select添加option
 
mshtml:javascript爲HTML文件中的Select添加option
使用結合MSHTML與WebBrowser生成美觀實用的WinForm應用程序(By Lostinet)中介紹的方法寫程序時遇到的一個問題的解決方法。在AxSHDocVw.AxWebBrowser控件加載的HTML文件中有一個Select,希望動態從數據庫中取得列表內...查看完整版>>mshtml:javascript爲HTML文件中的Select添加option
 
mshtml:javascript爲HTML文件中的Select添加option
使用結合MSHTML與WebBrowser生成美觀實用的WinForm應用程序(By Lostinet)中介紹的方法寫程序時遇到的一個問題的解決方法。在AxSHDocVw.AxWebBrowser控件加載的HTML文件中有一個Select,希望動態從數據庫中取得列表內...查看完整版>>mshtml:javascript爲HTML文件中的Select添加option
 
用javascript來顯示HTML控件的位置即javascript文件在ASP.NET中的運用
1. 首先在HTML的HEAD裏加入: <meta content="JavaScript" name="vs_defaultClientScript"><script language="javascript" src="../../Script/persistlocation.js"...查看完整版>>用javascript來顯示HTML控件的位置即javascript文件在ASP.NET中的運用
 
排序Select中Option項的一個示例
  Form中的Select控件不支持對選擇項(Option)的排序,下面我將對Option中value屬性值進行排序,並調整每個Option排序後的位置,具體代碼如下(這裏假設每個Option中的value與其中的text內容相同):  該函數運用...查看完整版>>排序Select中Option項的一個示例
 
采用DOM模型時創建一個Select節點後,要刪除option項的解決方法
采用DOM模型時創建一個Select節點後,要刪除option項的解決方法 采用DOM模型時創建一個Select節點後,要刪除option項的解決方法 我在實際運用中,碰到了javascript的一個不足之處,是我摸索出來的一個刪...查看完整版>>采用DOM模型時創建一個Select節點後,要刪除option項的解決方法
 
排序Select中Option項的一個示例
Form中的Select控件不支持對選擇項(Option)的排序,下面我將對Option中value屬性值進行排序,並調整每個Option排序後的位置,具體代碼如下(這裏假設每個Option中的value與其中的text內容相同): 該函數運用了Arr...查看完整版>>排序Select中Option項的一個示例
 
針對select寫了一個通用的option輸出函數
'author:chjpeng'email:chjpeng@163.comfunction writeSlt(arrstr,arrstrValue,selectedstr)'arrstr 要顯示在option裏面的值,arrstrValue option的實際值,selectedstr要選中的默認值'將一個字串分割爲數組,輸出se...查看完整版>>針對select寫了一個通用的option輸出函數
 
排序Select中Option項的一個示例
Form中的Select控件不支持對選擇項(Option)的排序,下面我將對Option中value屬性值進行排序,並調整每個Option排序後的位置,具體代碼如下(這裏假設每個Option中的value與其中的text內容相同):該函數運用了Array...查看完整版>>排序Select中Option項的一個示例
 
 
回到王朝網路移動版首頁