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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
JavaScript 对象创建的3种方法
Nov 17 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
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue底部加载更多的实例代码
2018/06/29 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
一步步解析Python斗牛游戏的概率
2016/02/12 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
爱护公共设施的标语
2014/06/24 职场文书
工作求职信
2014/07/04 职场文书
部门活动策划方案
2014/08/16 职场文书
孔庙导游词
2015/02/04 职场文书
综合实践活动报告
2015/02/05 职场文书
中学图书馆工作总结
2015/08/11 职场文书