【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无法 ...
随机推荐
- Ajax接收并显示后台传来的list集合内的数据信息
最近在学习Ajax做一个留言系统的时候碰到需要将list集合从后台传到前台ajax接收并显示的情况,在网上搜了很多,但很多情况都不是和我遇见的情况一样的,现在,直接贴出我的问题及解决方法. 后台代码: ...
- ansible 学习记录
Ansible 的重新学习记录 这里我的Ansible的宿主机是centos 7.2系统,这里我通过yum 安装Ansible 1.配置epel源 sudo yum -y install epel-r ...
- 基于Docker的负载均衡和服务发现
应用的容器化和微服务化带来的问题 在缺省网络模型中,容器每次重启后,IP会发生变动,在一个大的分布式系统保证IP地址不变是比较复杂的事情 IP频繁发生变动,动态应用部署无法预知容器的IP地址,clie ...
- 史上最全PHP正则表达式实例汇总
收集了一份php正则表达式的实例教程,真心不错,记录下. 正则表达式用于字符串处理.表单验证等场合,实用高效. 一些常用的表达式: $str = preg_replace("/(<a. ...
- 【Unity】11.1 角色控制器 (Character Controller)
分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 角色控制器(Character Controller)主要用于对第三人称或第一人称游戏主角的控制.如果要创建类人角色,可 ...
- python 文件目录遍历
递归遍历目录和文件 import os path = r'F:\PycharmProjects\basic gram\作业和习题\test' def getAllFileAndDir(path): # ...
- (原创)c++11改进我们的模式之改进观察者模式
和单例模式面临的是同样的问题,主题更新的接口难以统一,很难做出一个通用的观察者模式,还是用到可变模板参数解决这个问题,其次还用到了右值引用,避免多余的内存移动.c++11版本的观察者模式支持注册的观察 ...
- 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies
在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...
- python（46）：对字典进行排序，多键值排序
注:改于2017-12-07,python3 下 Removed dict.iteritems(), dict.iterkeys(), and dict.itervalues(). Instead: ...
- 【设计模式】装饰器模式与Java Servlet、Spring Session在其中的使用
简述 装饰器模式,可以通过装饰器类,通过依赖原实现的方式(不使用继承),达到扩展原实现的目的.UML图如下: ServletRequestWrapper于其中的使用 ServletRequestWra ...