select元素添加option的add()方法 | try{}catch{}
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>
