首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

朱羽佳

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
Angular 应用技巧总结
Sep 14 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
开发用到的js封装方法（20种）
Oct 12 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
node.js +mongdb实现登录功能
Jun 18 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
动静分离(1) 远程控制(1) Windows server 2019(5) Telnet(1) Windows server 2008(5) http(6) 负载均衡(6) Windows server 2016(6) https(7) IIS(7)
You might like
PHP的FTP学习（一）[转自奥索]
2006/10/09 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
浅谈PHP封装CURL
2019/03/06 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
实习教师自我鉴定
2013/09/27 职场文书
厨师岗位职责
2013/11/12 职场文书
学生党支部先进事迹
2014/02/04 职场文书
党员违纪检讨书
2014/02/18 职场文书
酒桌上的开场白
2015/06/01 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL