jQuery在ie6下无法设置select选中的解决方法详解


Posted in Javascript onSeptember 20, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
jQuery简单倒计时效果完整示例
Sep 20 #Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 #Javascript
jQuery实现的网页换肤效果示例
Sep 20 #Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 #Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 #Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 #Javascript
关于Javascript中defer和async的区别总结
Sep 20 #Javascript
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
Python OpenCV获取视频的方法
2018/02/28 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python验证码截取识别代码实例
2020/05/16 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
Internet体系结构
2014/12/21 面试题
Java基础知识面试题
2014/03/25 面试题
生产副总岗位职责
2013/11/28 职场文书
大学自荐信
2013/12/12 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
社区志愿者活动总结
2014/06/26 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
初中作文评语
2014/12/25 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书