select元素添加option的add()方法 | try{}catch{}
2024-08-24 17:41:51
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>
最新文章
- zabbix完整安装
- 全面分析 Spring 的编程式事务管理及声明式事务管理
- 详解.Net消息队列(MSMQ)应用
- jQuery 菜单项切换
- SQL问题集锦
- class、interface、struct的区别
- HDU3564 --- Another LIS (线段树维护最值问题)
- MongoDB学习笔记(五) MongoDB文件存取操作
- yii2.0中添加二维数组,多条数据。
- Callable抛出异常与future.get
- 整合MyBatis(springboot)
- Java关键字-----------------java中synchronized关键字的用法
- 窗口事件onresize
- Repository模式与UnitOfWorks模式的运用
- 安装sybase服务器并连接数据库
- [label][Node.js] Three content management systems base on Node.js
- java获取指定日期的年、月、日的值
- css hover伪类选择器与JQuery hover()方法
- luogu4074 [WC2013]糖果公园(树上带修莫队)
- 【META http-equiv=";Content-Type"; Content=";text/html; Charset=*】意义详解
热门文章
- Java中的String pool
- PHP执行insert语句报错“Data too long for column”解决办法
- linux(ubuntu) 查看系统设备信息 命令
- BigDecimal的用法详解(保留两位小数,四舍五入,数字格式化,科学计数法转数字,数字里的逗号处理)
- 设置树莓派SSH连接因超时闲置断开(转)
- 【Android】Android解析短信操作
- AndroidStudio 编译异常java.lang.OutOfMemoryError: GC overhead limit exceeded
- 懒得说IE6了,写个js插件不能写注释,原因如下
- PNG怎么转换成32位的BMP保持透明
- php网站被挂木马修复方法总结