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>

select元素添加option的add()方法 | try{}catch{}的更多相关文章

  1. JS对select动态添加option操作 （三级联动） （搜索拼接）

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

  2. js实现select动态添加option

    关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...

  3. border-radius是向元素添加圆角边框的方法

    border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下 ...

  4. JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  5. jQuery为动态生成的select元素添加事件的方法

    项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelec ...

  6. select初始化添加option,通过标签给出回显值，由于回显值和初始化值option中有一个值重复，去重等问题！

    第一张图片: 第二张图片 /** *该方法是为了去重,所谓去重就是 因为回显给select附上了值并设置为selected选中状态,而在我们初始化所有的select添加option元素中于回显的值重复 ...

  7. jquery的select元素和option的相关操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. select 动态添加option函数

    转自:https://lym6520.iteye.com/blog/309937 经常会用到select动态添加元素,写了个方法,方便调用!  ... /** * 功能:select对象动态添加Opt ...

  9. select 中添加option的注意

    在平时写JS中经常要给Select添加option,如果我们把option中的数据用一个字符串来表示: eg: var strOption='<option>1</option> ...

随机推荐

  1. 转:场景管理--BSP

    对于一个3D引擎来说,最核心的部分应该算是场景组织(scene graph)了,如果这部分你都没有设计好, 那么就别指望开发一个成熟的3D引擎了.为了开发3d引擎,所以我首先就研究这方面的内容,对一个 ...

  2. Node单线程高并发原理

    一.node是如何处理web请求的 浏览器中的js是单线程的,node也是单线程的.这个单线程相当于一个大管家,一切大小事务都要经过他的手才能办成,它总是把IO任务放入到任务池中. 虽然说是单线程,但 ...

  3. 题外话：我想立刻辞职，然后闭关学习编程语言，我给自己3个月时间学习C语言！这样行的通吗

    以下文章虽然是编程,但是对于IT行业都通用 文章背景,回答提问:我想立刻辞职,然后闭关学习编程语言,我给自己3个月时间学习C语言!这样行的通吗? 我的建议是这样:1. 不要辞职.首先说,你对整个开发没 ...

  4. (转)失败和拒绝，也是一种肯定 找工作时，我四处碰壁这一段经历对自己职业生涯的帮助最大。为什么？ "因为这些挫折让我的脸皮变厚了 如果你不是每天被人拒绝，那就说明你的人生目标不够远大 所谓成功，就是不停地经历失败，并且始终保持热情

    (转)失败和拒绝,也是一种肯定 昨天,先是看到一个老外,说了一句很震撼的话. "你个人的项目,应该有四分之一会失败,否则就说明你的冒险精神不够." (Expect and hope ...

  5. Vue.js 综合

    <!DOCTYPE HTML> <html> <head> <title>vue.js 处理用户输入</title> <script ...

  6. magento 得到树形结构的分类列表

    <?php ?> <?php   class Lehui_AllCategoryList_Block_List extends Mage_Core_Block_Template { ...

  7. python对文件操作

    python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 返回指定目录下的所有文件和目 ...

  8. 【struts2】Action的生命周期

    Struts2的Action的生命周期是:Struts2为每个请求都重新初始化一个Action的实例.可以稍微改造一下代码来验证一下. 给HelloWorldAction加上一个public无参的构造 ...

  9. 数字的可视化：python画图之散点图sactter函数详解

    最近开始学习python编程,遇到scatter函数,感觉里面的参数不知道什么意思于是查资料,最后总结如下: 1.scatter函数原型 2.其中散点的形状参数marker如下: 3.其中颜色参数c如 ...

  10. Android Studio：正确导入SO相关文件

      导入so文件有2种方式 第一种: 使用jniLibs文件夹导入so文件,则仅需将所有cpu类型的文件夹拷进去. 在project结构下,module目录下创建libs文件夹,放入jar文件:在sr ...