«

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

时间:2024-3-2 08:29     作者:韩俊     分类: Javascript


本文实例讲述了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":"u4f20u4e16u51b7u6708","id":"game1"}],"id":"dx1","name":"u7535u4fe1u4e00u533a"},{"gm_id":39,"groups":[{"index":"3","name":"u4ed9u5251u604bu5f71","id":"game3"}],"id":"dx4","name":"u7535u4fe1u4e8c/u4e09/u56db/u4e94/u516du533a"},{"gm_id":49,"groups":[{"index":"1","name":"u7b11u50b2u5343u53e4","id":"game1"}],"id":"dx7","name":"u7535u4fe1u4e03u533a/u516bu533a/u4e5du533a"},{"gm_id":62,"groups":[{"index":"1","name":"u98ceu5f71u76dbu5bb4","id":"game1"}],"id":"dx10","name":"u7535u4fe1u5341u533a"},{"gm_id":68,"groups":[{"index":"1","name":"u70c8u65e5u661fu5b87","id":"game1"},{"index":"3","name":"u5929u67a2u661fu8fb0","id":"game3"},{"index":"5","name":"u7eb5u5730","id":"game5"},{"index":"6","name":"u91d1u83b2","id":"game6"}],"id":"dx11","name":"u7535u4fe1u5341u4e00u533a"}]';
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":"u4f20u4e16u51b7u6708","id":"game1"}],"id":"dx1","name":"u7535u4fe1u4e00u533a"},{"gm_id":39,"groups":[{"index":"3","name":"u4ed9u5251u604bu5f71","id":"game3"}],"id":"dx4","name":"u7535u4fe1u4e8c/u4e09/u56db/u4e94/u516du533a"},{"gm_id":49,"groups":[{"index":"1","name":"u7b11u50b2u5343u53e4","id":"game1"}],"id":"dx7","name":"u7535u4fe1u4e03u533a/u516bu533a/u4e5du533a"},{"gm_id":62,"groups":[{"index":"1","name":"u98ceu5f71u76dbu5bb4","id":"game1"}],"id":"dx10","name":"u7535u4fe1u5341u533a"},{"gm_id":68,"groups":[{"index":"1","name":"u70c8u65e5u661fu5b87","id":"game1"},{"index":"3","name":"u5929u67a2u661fu8fb0","id":"game3"},{"index":"5","name":"u7eb5u5730","id":"game5"},{"index":"6","name":"u91d1u83b2","id":"game6"}],"id":"dx11","name":"u7535u4fe1u5341u4e00u533a"}]';
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":"u4f20u4e16u51b7u6708","id":"game1"}],"id":"dx1","name":"u7535u4fe1u4e00u533a"},{"gm_id":39,"groups":[{"index":"3","name":"u4ed9u5251u604bu5f71","id":"game3"}],"id":"dx4","name":"u7535u4fe1u4e8c/u4e09/u56db/u4e94/u516du533a"},{"gm_id":49,"groups":[{"index":"1","name":"u7b11u50b2u5343u53e4","id":"game1"}],"id":"dx7","name":"u7535u4fe1u4e03u533a/u516bu533a/u4e5du533a"},{"gm_id":62,"groups":[{"index":"1","name":"u98ceu5f71u76dbu5bb4","id":"game1"}],"id":"dx10","name":"u7535u4fe1u5341u533a"},{"gm_id":68,"groups":[{"index":"1","name":"u70c8u65e5u661fu5b87","id":"game1"},{"index":"3","name":"u5929u67a2u661fu8fb0","id":"game3"},{"index":"5","name":"u7eb5u5730","id":"game5"},{"index":"6","name":"u91d1u83b2","id":"game6"}],"id":"dx11","name":"u7535u4fe1u5341u4e00u533a"}]';
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程序设计有所帮助。

标签: javascript

热门推荐