【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无法 ...
随机推荐
- 关于haproxy多域名证书的配置
frontend main bind *: bind *: ssl crt /etc/haproxy/kong.com.pem crt /etc/haproxy/51yijI.com.pem no-s ...
- 设计模式-单例模式（Singleton Pattren）（饿汉模式和懒汉模式）
单例模式(Singleton Pattren):确保一个类在整个应用中只有一个实例,并提供一个全局访问点. 实现要点: 1. 私有化构造方法 2. 类的实例在类初始化的时候创建 3. 提供一个类方法, ...
- [Leet Code]Path Sum
很简单一道题,搞错了N次,记录一下. public class Solution { private int currSum = 0; public boolean hasPathSum(TreeNo ...
- 2. Apache Axis2 快速学习手册之概览
这篇博文和大家一起学习下Apache Axis2 官方文档的快速指南篇 英文原文:http://axis.apache.org/axis2/java/core/docs/quickstartguide ...
- Python Socket网络编程详解
Socket 简介 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. s ...
- 每日英语：The Invasion of the Online Tutors
It's a nightly dilemma in many households: A student hits a wall doing homework, and parents are too ...
- Android自定义AlertDialog
常见的一种方法: [html] view plaincopyprint? AlertDialog.Builder builder; AlertDialog alertDialog; LayoutInf ...
- Python 操作redis有序集合(sorted set)
#coding:utf8 import redis r =redis.Redis(host=") 1.Zadd Zadd 命令用于将一个或多个成员元素及其分数值加入到有序集当中.如果某个成员 ...
- 【Git】Git与GitHub 入门
GitHub GitHub是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开. 对于一般人来说公共仓库就已经足够了,而且我们也没多少代码来管理 ...
- 【Delphi】SPComm注意事项
Spcomm属性设置 SPCOMM 控件的属性设置很关键的,特别是使用事件驱动时接收大数据块时尤为明显,如果设置不当,接收到的数据可能严重出错. ReadIntervalTimeout:=100 SP ...