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 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
从vue源码看props的用法
Jan 09 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 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上传图片、删除图片实现代码
2010/05/12 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
JavaScript中的this机制
2016/01/30 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
JS数组转字符串实现方法解析
2020/09/04 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
python爬虫爬取网页表格数据
2018/03/07 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
岗位职责的含义
2013/11/17 职场文书
实习老师离校感言
2014/02/03 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
个人自查自纠材料
2014/10/14 职场文书
五四青年节活动总结
2015/02/10 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python