WEB开发网
开发学院网页设计JavaScript 给select控件在指定位置插入option(javascript) 阅读

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

 2008-08-28 19:59:27 来源:WEB开发网   
核心提示:问题描述 对于select控件 1 2 3,我们可以通过它的options.add(new Option(v,t))的方法动态的插入一个option选项,给select控件在指定位置插入option(javascript),但是新增的option的位置只能在最后,却不能插入到指定的任意位置,使用 selectCtl.

问题描述

  对于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)这种简洁的方式来编程了,我还没有写,所以不能给出代码了。

Tags:select 控件 指定

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接