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