【jquery】jquery 在 ie6 下无法设置 select 选中的解决方法
2013-08-15 14:22
766 查看
本文主要解决在 ie6 下,jquery 无法设置 select 选中的问题。我们先看个例子:
以上代码在所有浏览器中都没有问题,打开页面 select 会选中第二个选项。那么当 select 里的内容是动态添加的,又会是怎样的情况呢?
我们可以看到在 chrome,firefox,ie8,ie7 这些浏览器都没有问题,但是在蛋疼的 ie6 浏览器中会 js 报错(无法设置 selected 属性,未指明的错误)。
解决方法有两种:setTimeout 和 try/catch
第一种:setTimeout(推荐)
第二种:try/catch
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo</title> </head> <body> <select name="gameZone" id="gameZone"> <option value="0">请选择游戏大区</option> <option value="1">游戏一区</option> <option value="2">游戏二区</option> </select> </body> </html> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $.each($('#gameZone > option'),function(){ if($(this).val() == '1'){ $(this).attr('selected','selected'); } }); }); </script>
以上代码在所有浏览器中都没有问题,打开页面 select 会选中第二个选项。那么当 select 里的内容是动态添加的,又会是怎样的情况呢?
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo</title> </head> <body> <select name="gameZone" id="gameZone"> <option value="0">请选择游戏大区</option> </select> </body> </html> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript"> var servers ='[{"gm_id":33,"groups":[{"index":"1","name":"\u4f20\u4e16\u51b7\u6708","id":"game1"}],"id":"dx1","name":"\u7535\u4fe1\u4e00\u533a"},{"gm_id":39,"groups":[{"index":"3","name":"\u4ed9\u5251\u604b\u5f71","id":"game3"}],"id":"dx4","name":"\u7535\u4fe1\u4e8c\/\u4e09\/\u56db\/\u4e94\/\u516d\u533a"},{"gm_id":49,"groups":[{"index":"1","name":"\u7b11\u50b2\u5343\u53e4","id":"game1"}],"id":"dx7","name":"\u7535\u4fe1\u4e03\u533a\/\u516b\u533a\/\u4e5d\u533a"},{"gm_id":62,"groups":[{"index":"1","name":"\u98ce\u5f71\u76db\u5bb4","id":"game1"}],"id":"dx10","name":"\u7535\u4fe1\u5341\u533a"},{"gm_id":68,"groups":[{"index":"1","name":"\u70c8\u65e5\u661f\u5b87","id":"game1"},{"index":"3","name":"\u5929\u67a2\u661f\u8fb0","id":"game3"},{"index":"5","name":"\u7eb5\u5730","id":"game5"},{"index":"6","name":"\u91d1\u83b2","id":"game6"}],"id":"dx11","name":"\u7535\u4fe1\u5341\u4e00\u533a"}]'; function showZone(){ var serversLists = eval(servers); var serversHtml = '<option value="0">请选择游戏大区</option>'; for(var i = 0; i < serversLists.length; i++){ serversHtml += '<option value="' + serversLists[i].id + '">' + serversLists[i].name + '</option>'; } return serversHtml; }; $(function(){ $('#gameZone').html(showZone()); $.each($('#gameZone > option'),function(){ if($(this).val() == 'dx1'){ $(this).attr('selected','selected'); } }); }); </script>
我们可以看到在 chrome,firefox,ie8,ie7 这些浏览器都没有问题,但是在蛋疼的 ie6 浏览器中会 js 报错(无法设置 selected 属性,未指明的错误)。
解决方法有两种:setTimeout 和 try/catch
第一种:setTimeout(推荐)
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo</title> </head> <body> <select name="gameZone" id="gameZone"> <option value="0">请选择游戏大区</option> </select> </body> </html> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript"> var servers ='[{"gm_id":33,"groups":[{"index":"1","name":"\u4f20\u4e16\u51b7\u6708","id":"game1"}],"id":"dx1","name":"\u7535\u4fe1\u4e00\u533a"},{"gm_id":39,"groups":[{"index":"3","name":"\u4ed9\u5251\u604b\u5f71","id":"game3"}],"id":"dx4","name":"\u7535\u4fe1\u4e8c\/\u4e09\/\u56db\/\u4e94\/\u516d\u533a"},{"gm_id":49,"groups":[{"index":"1","name":"\u7b11\u50b2\u5343\u53e4","id":"game1"}],"id":"dx7","name":"\u7535\u4fe1\u4e03\u533a\/\u516b\u533a\/\u4e5d\u533a"},{"gm_id":62,"groups":[{"index":"1","name":"\u98ce\u5f71\u76db\u5bb4","id":"game1"}],"id":"dx10","name":"\u7535\u4fe1\u5341\u533a"},{"gm_id":68,"groups":[{"index":"1","name":"\u70c8\u65e5\u661f\u5b87","id":"game1"},{"index":"3","name":"\u5929\u67a2\u661f\u8fb0","id":"game3"},{"index":"5","name":"\u7eb5\u5730","id":"game5"},{"index":"6","name":"\u91d1\u83b2","id":"game6"}],"id":"dx11","name":"\u7535\u4fe1\u5341\u4e00\u533a"}]'; function showZone(){ var serversLists = eval(servers); var serversHtml = '<option value="0">请选择游戏大区</option>'; for(var i = 0; i < serversLists.length; i++){ serversHtml += '<option value="' + serversLists[i].id + '">' + serversLists[i].name + '</option>'; } return serversHtml; }; $(function(){ $('#gameZone').html(showZone()); setTimeout(function(){ $.each($('#gameZone > option'),function(){ if($(this).val() == 'dx1'){ $(this).attr('selected','selected'); } }); },1); }); </script>
第二种:try/catch
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo</title> </head> <body> <select name="gameZone" id="gameZone"> <option value="0">请选择游戏大区</option> </select> </body> </html> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript"> var servers ='[{"gm_id":33,"groups":[{"index":"1","name":"\u4f20\u4e16\u51b7\u6708","id":"game1"}],"id":"dx1","name":"\u7535\u4fe1\u4e00\u533a"},{"gm_id":39,"groups":[{"index":"3","name":"\u4ed9\u5251\u604b\u5f71","id":"game3"}],"id":"dx4","name":"\u7535\u4fe1\u4e8c\/\u4e09\/\u56db\/\u4e94\/\u516d\u533a"},{"gm_id":49,"groups":[{"index":"1","name":"\u7b11\u50b2\u5343\u53e4","id":"game1"}],"id":"dx7","name":"\u7535\u4fe1\u4e03\u533a\/\u516b\u533a\/\u4e5d\u533a"},{"gm_id":62,"groups":[{"index":"1","name":"\u98ce\u5f71\u76db\u5bb4","id":"game1"}],"id":"dx10","name":"\u7535\u4fe1\u5341\u533a"},{"gm_id":68,"groups":[{"index":"1","name":"\u70c8\u65e5\u661f\u5b87","id":"game1"},{"index":"3","name":"\u5929\u67a2\u661f\u8fb0","id":"game3"},{"index":"5","name":"\u7eb5\u5730","id":"game5"},{"index":"6","name":"\u91d1\u83b2","id":"game6"}],"id":"dx11","name":"\u7535\u4fe1\u5341\u4e00\u533a"}]'; function showZone(){ var serversLists = eval(servers); var serversHtml = '<option value="0">请选择游戏大区</option>'; for(var i = 0; i < serversLists.length; i++){ serversHtml += '<option value="' + serversLists[i].id + '">' + serversLists[i].name + '</option>'; } return serversHtml; }; $(function(){ $('#gameZone').html(showZone()); try{ $.each($('#gameZone > option'),function(){ if($(this).val() == 'dx1'){ $(this).attr('selected','selected'); } }); }catch(e){} }); </script>
相关文章推荐
- jQuery在ie6下无法设置select选中的解决方法详解
- jQuery选中select控件 无法设置selected的解决方法
- 解决IE6下select无法设置选中的BUG
- 解决HTML select控件 设置属性 disabled 后无法向后台传值的方法
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- jquery插件select之chosen选中去掉空格解决方法
- MVC dropdownlist 后端设置select属性后前端依然不能默认选中的解决方法
- 解决HTML select控件 设置属性 disabled 后无法向后台传值的方法
- IE6下提示无法设置selected属性,无效索引错误的解决方法
- jQuery 选中 select控件 无法设置selected
- 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题
- jQuery设置和获取select、checkbox、radio的选中值方法
- 解决IE6下JS动态设置图片IMG的SRC时图片无法加载错误的方法
- 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题
- 解决IE6下JS动态设置图片IMG的SRC时图片无法加载错误的方法
- jQuery选择器----------jquery实现select下拉框的取值与赋值,设置选中的方法大全
- 用IE调试ActiveX控件的相关设置(无法启动调试信息,找不到Microsoft Internet Explorer的解决方法)
- 解决jQuery Validate插件无法校验select组件
- jquery操作select详解(取值,设置选中)