本文实例讲述了jQuery在ie6下无法设置select选中的解决方法。分享给大家供大家参考，具体如下：
这里主要解决在 ie6 下，jquery 无法设置 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> <option value="1">游戏一区</option> <option value="2">游戏二区</option> </select> </body> </html> <script type="text/javascript" src="http://www.jb51.netjs/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="http://www.jb51.netjs/jquery.min.js"></script> <script type="text/javascript"> var servers ='[{"gm_id":33,"groups":[{"index":"1","name":"u4f20u4e16u51b7u6708","id":"game1"}],"id":"dx1","name":"u7535u4fe1u4e00u533a"},{"gm_id":39,"groups":[{"index":"3","name":"u4ed9u5251u604bu5f71","id":"game3"}],"id":"dx4","name":"u7535u4fe1u4e8c/u4e09/u56db/u4e94/u516du533a"},{"gm_id":49,"groups":[{"index":"1","name":"u7b11u50b2u5343u53e4","id":"game1"}],"id":"dx7","name":"u7535u4fe1u4e03u533a/u516bu533a/u4e5du533a"},{"gm_id":62,"groups":[{"index":"1","name":"u98ceu5f71u76dbu5bb4","id":"game1"}],"id":"dx10","name":"u7535u4fe1u5341u533a"},{"gm_id":68,"groups":[{"index":"1","name":"u70c8u65e5u661fu5b87","id":"game1"},{"index":"3","name":"u5929u67a2u661fu8fb0","id":"game3"},{"index":"5","name":"u7eb5u5730","id":"game5"},{"index":"6","name":"u91d1u83b2","id":"game6"}],"id":"dx11","name":"u7535u4fe1u5341u4e00u533a"}]'; 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="http://www.jb51.netjs/jquery.min.js"></script> <script type="text/javascript"> var servers ='[{"gm_id":33,"groups":[{"index":"1","name":"u4f20u4e16u51b7u6708","id":"game1"}],"id":"dx1","name":"u7535u4fe1u4e00u533a"},{"gm_id":39,"groups":[{"index":"3","name":"u4ed9u5251u604bu5f71","id":"game3"}],"id":"dx4","name":"u7535u4fe1u4e8c/u4e09/u56db/u4e94/u516du533a"},{"gm_id":49,"groups":[{"index":"1","name":"u7b11u50b2u5343u53e4","id":"game1"}],"id":"dx7","name":"u7535u4fe1u4e03u533a/u516bu533a/u4e5du533a"},{"gm_id":62,"groups":[{"index":"1","name":"u98ceu5f71u76dbu5bb4","id":"game1"}],"id":"dx10","name":"u7535u4fe1u5341u533a"},{"gm_id":68,"groups":[{"index":"1","name":"u70c8u65e5u661fu5b87","id":"game1"},{"index":"3","name":"u5929u67a2u661fu8fb0","id":"game3"},{"index":"5","name":"u7eb5u5730","id":"game5"},{"index":"6","name":"u91d1u83b2","id":"game6"}],"id":"dx11","name":"u7535u4fe1u5341u4e00u533a"}]'; 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="http://www.jb51.netjs/jquery.min.js"></script> <script type="text/javascript"> var servers ='[{"gm_id":33,"groups":[{"index":"1","name":"u4f20u4e16u51b7u6708","id":"game1"}],"id":"dx1","name":"u7535u4fe1u4e00u533a"},{"gm_id":39,"groups":[{"index":"3","name":"u4ed9u5251u604bu5f71","id":"game3"}],"id":"dx4","name":"u7535u4fe1u4e8c/u4e09/u56db/u4e94/u516du533a"},{"gm_id":49,"groups":[{"index":"1","name":"u7b11u50b2u5343u53e4","id":"game1"}],"id":"dx7","name":"u7535u4fe1u4e03u533a/u516bu533a/u4e5du533a"},{"gm_id":62,"groups":[{"index":"1","name":"u98ceu5f71u76dbu5bb4","id":"game1"}],"id":"dx10","name":"u7535u4fe1u5341u533a"},{"gm_id":68,"groups":[{"index":"1","name":"u70c8u65e5u661fu5b87","id":"game1"},{"index":"3","name":"u5929u67a2u661fu8fb0","id":"game3"},{"index":"5","name":"u7eb5u5730","id":"game5"},{"index":"6","name":"u91d1u83b2","id":"game6"}],"id":"dx11","name":"u7535u4fe1u5341u4e00u533a"}]'; 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程序设计有所帮助。
【jQuery在ie6下无法设置select选中的解决方法详解】相关文章：
★ JavaScript中的Math.sin()方法使用详解
★ jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法