select元素添加option的add()方法 | try{}catch{}

最新推荐文章于 2021-02-26 17:25:25 发布

angaixing0071

最新推荐文章于 2021-02-26 17:25:25 发布

阅读量411

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liulangmao/p/3450191.html

版权

1.javascript中的select元素添加option使用add()方法

select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置

普通浏览器中,第二个参数是一个既有的option对象,添加的option元素被插入到它之前.

ie7浏览器中,第二个参数是一个索引,表示第n个既有的option对象.

ie8以上版本,传入两种对象它都能识别.

如果没有第二个参数,则插入在最后.

对于普通浏览器,如果传入的是索引数值,它不会认为是出错,还是会添加在最后

2.jquery中的$.browser检测浏览器类型

参考:jquery实战/chapter6/$.browser(my).html

3.try{}catch{}进行分支避免检测浏览器

try{先执行的代码} catch(err){出错时执行的代码}

对于普通浏览器,如果传入的是索引数值,它不会认为是出错,还是会添加在最后,

所以,使用try{}catch{}方法解决这个问题,必须把普通浏览器的适用方法放在try里面.

参考代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>try{}catch{}以及select添加option的add方法</title>
    <link rel="stylesheet" type="text/css" href="../common.css">
    <script type="text/javascript"
            src="../scripts/jquery-1.2.1.js"></script>
    <script type="text/javascript">
//try{先执行的代码} catch(err){出错时执行的代码}
//select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置
//普通浏览器中,第二个参数是一个既有的option对象,添加的option元素被插入到它之前.
//ie7浏览器中,第二个参数是一个索引,表示第n个既有的option对象.
//ie8以上版本,传入两种对象它都能识别.
//如果没有第二个参数,则插入在最后.
//对于普通浏览器,如果传入的是索引数值,它不会认为是出错,还是会添加在最后,所以,使用try{}catch{}方法解决这个问题,必须把普通浏览器的适用方法放在try里面.
      $(function(){
        $('#testButton').click(function(){
           var selectElement=$('#testSubject')[0];     //通过下标可以把jquery对象转换为javascript对象
           try{                                        //普通浏览器和ie8以上版本执行以下代码
           selectElement.add(new Option('2.5'),selectElement.options[2])   
           }
           catch(err){                                 //ie7执行以下代码
           selectElement.add(new Option('2.5'),2)    
           }        
        }) 
      });
    </script>
  </head>

  <body class="plain">
    <select id="testSubject" multiple="multiple" size="5">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
    </select>
    <div>
      <button type="button" id="testButton">Click me!</button>
    </div>
  </body>
</html>

转载于:https://www.cnblogs.com/liulangmao/p/3450191.html

angaixing0071

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select元素添加option的add()方法 | try{}catch{}

1.javascript中的select元素添加option使用add()方法select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置普通浏览器中,第二个参数是一个既有的option对象,添加的option元素被插入到它之前.ie7浏览器中,第二个参数是一个索引,表示第n个既有的option对象.ie8以上版本,传入两种对象它都能识...
复制链接

扫一扫