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

2019-11-20 08:56:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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错误与调试技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：jQuery实现的自定义滚动条实例详解

下一篇：jQuery简单倒计时效果完整示例