【jquery】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="/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】jquery 在 ie6 下无法设置 select 选中的解决方法的更多相关文章
- jquery submit ie6下失效的原因分析及解决方法
ie6中, $('a.btn').click(function(){ form.submit(); }) 点击失效: 分析: 微软低版本浏览器会先执行link标签的自身事件也就是href事件,这样就中 ...
- jquery设置select选中
/*设置select选中开始*/ var prod_type=$('.prod_type').val(); //alert(prod_type); var select = document.getE ...
- IE6下div遮盖select的最优解决方案
a.本节精选html5/css频道里一款IE6下div遮盖select的最优解决方案 原理:利用iframe来遮挡select,再用div来遮挡iframe,就这么简单. 1)首先,建一个div层和i ...
- jquery.ajax的url中传递中文乱码问题的解决方法
jquery.ajax的url中传递中文乱码问题的解决方法 JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQu ...
- 解决IE6下浮动层固定定位的经典方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- IE6/7/8 CSS兼容性问题和解决方法汇总
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
- [转]win7下apache2.4响应很慢解决方法
win7下apache2.4响应很慢解决方法 PS.按照以下方法测试了以下,似乎确实快了一点[skysowe] 转载自: http://blog.sina.com.cn/s/blog_75ad1010 ...
- 排错-windows下 ORA-12560 TNS 协议适配器错误解决方法
排错-windows下_ORA-12560 TNS 协议适配器错误解决方法 by:授客 QQ:1033553122 问题描述: 修改SQL*Plus窗口属性后,重新打开SQL*Plus时出现ORA-1 ...
- windows下oracle数据库报错ORA-12705解决方法
转自:http://blog.sina.com.cn/s/blog_16eaf6b940102x66q.html 有个朋友,他们那边windows虚拟机重启后,数据库不能起来报错ORA-12705无法 ...
随机推荐
- 【OfficeWebViewer】在线预览Word，Excel~
今天有个需求, 直接支持web端预览word,excel等文件, 查了一下很多写的比较麻烦, 这里找到一种简单的方式: http://view.officeapps.live.com/op/view. ...
- php分享十八七：mysql基础
mysql操作数据库代码: $link = @mysql_connect('localhost:3306', 'root', 'root') or die(mysql_error()); mysql_ ...
- 为你的网站加上SSL，可以使用HTTPS进行访问
首先,我们使用的是nginx 将域名证书文件1_www.domain.com_bundle.crt .私钥文件2_www.domain.com.key保存到同一个目录,例如/usr/local/ngi ...
- [100]linux常用命令参数小结
1.mkdir 2.ls -l -d 显示目录 -F 给文件夹结尾加/标识 -a 以.开头的都是隐藏文件 -rt 按照修改时间倒序排列(最新修改的在最下) ls -lhrt #最新的在下面 3.cd ...
- 发布Web应用程序时发生的“xx.aspx.cs文件不存在”错误
(注意:这里说的Web应用程序并不是Web网站) 在VS里调试.IIS里浏览含.CS源码的项目都是没有问题的.但是发布后,所有的.CS文件都被编译到bin文件夹里去了.在IIS里浏览,发生“分析器错误 ...
- 微网站|手机端html弹窗、弹层、提示框、加载条
layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...
- windows下IntelliJ IDEA搭建kafka源码环境
于kafka核心原理的资料,网上有很多,但是如果不自己研究其源码,永远是知其然而不知所以然.下面就来演示如何在windows环境下来编译kafka源码,并通过IntelliJ IDEA开发工具搭建ka ...
- Lintcode: Kth Largest Element 解题报告
Kth Largest Element Find K-th largest element in an array. Note You can swap elements in the array E ...
- 【word2vec】Distributed Representation——词向量
Distributed Representation 这种表示,它最早是 Hinton 于 1986 年提出的,可以克服 one-hot representation 的缺点. 其基本想法是: 通过训 ...
- PD003-NET通用后台系统
PD003-NET通用后台系统 开发语言.Net 成品成品 前端技术jquery 数据库sql server .net 通用后台框架 详细信息 基于EF+MVC+Bootstrap构建通用后台管理 ...