jQuery在ie6下无法设置select选中的解决方法详解
本文实例讲述了jQuery在ie6下无法设置select选中的解决方法。分享给大家供大家参考，具体如下：
这里主要解决在ie6下，jquery无法设置select选中的问题。我们先看个例子：
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8"/>
<title>demo</title>
</head>
<body>
<selectname="gameZone"id="gameZone">
<optionvalue="0">请选择游戏大区</option>
<optionvalue="1">游戏一区</option>
<optionvalue="2">游戏二区</option>
</select>
</body>
</html>
<scripttype="text/javascript"src="/js/jquery.min.js"></script>
<scripttype="text/javascript">
$(function(){
$.each($('#gameZone>option'),function(){
if($(this).val()=='1'){
$(this).attr('selected','selected');
}
});
});
</script>
以上代码在所有浏览器中都没有问题，打开页面select会选中第二个选项。那么当select里的内容是动态添加的，又会是怎样的情况呢？
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8"/>
<title>demo</title>
</head>
<body>
<selectname="gameZone"id="gameZone">
<optionvalue="0">请选择游戏大区</option>
</select>
</body>
</html>
<scripttype="text/javascript"src="/js/jquery.min.js"></script>
<scripttype="text/javascript">
varservers='[{"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"}]';
functionshowZone(){
varserversLists=eval(servers);
varserversHtml='<optionvalue="0">请选择游戏大区</option>';
for(vari=0;i<serversLists.length;i++){
serversHtml+='<optionvalue="'+serversLists[i].id+'">'+serversLists[i].name+'</option>';
}
returnserversHtml;
};
$(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（推荐）
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8"/>
<title>demo</title>
</head>
<body>
<selectname="gameZone"id="gameZone">
<optionvalue="0">请选择游戏大区</option>
</select>
</body>
</html>
<scripttype="text/javascript"src="/js/jquery.min.js"></script>
<scripttype="text/javascript">
varservers='[{"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"}]';
functionshowZone(){
varserversLists=eval(servers);
varserversHtml='<optionvalue="0">请选择游戏大区</option>';
for(vari=0;i<serversLists.length;i++){
serversHtml+='<optionvalue="'+serversLists[i].id+'">'+serversLists[i].name+'</option>';
}
returnserversHtml;
};
$(function(){
$('#gameZone').html(showZone());
setTimeout(function(){
$.each($('#gameZone>option'),function(){
if($(this).val()=='dx1'){
$(this).attr('selected','selected');
}
});
},1);
});
</script>
第二种：try/catch
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8"/>
<title>demo</title>
</head>
<body>
<selectname="gameZone"id="gameZone">
<optionvalue="0">请选择游戏大区</option>
</select>
</body>
</html>
<scripttype="text/javascript"src="/js/jquery.min.js"></script>
<scripttype="text/javascript">
varservers='[{"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"}]';
functionshowZone(){
varserversLists=eval(servers);
varserversHtml='<optionvalue="0">请选择游戏大区</option>';
for(vari=0;i<serversLists.length;i++){
serversHtml+='<optionvalue="'+serversLists[i].id+'">'+serversLists[i].name+'</option>';
}
returnserversHtml;
};
$(function(){
$('#gameZone').html(showZone());
try{
$.each($('#gameZone>option'),function(){
if($(this).val()=='dx1'){
$(this).attr('selected','selected');
}
});
}catch(e){}
});
</script>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery错误与调试技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。