【jquery】jquery在ie6下无法设置select选中的解决方法

最新推荐文章于 2021-09-01 12:52:00 发布

刀尖的舞者

最新推荐文章于 2021-09-01 12:52:00 发布

阅读量172

点赞数

分类专栏：前端文章标签： jquery select selected settimeout try catch

原文链接：https://www.mk2048.com/blog/blog.php?id=h1jaha2ca0ib&title=%E3%80%90jquery%E3%80%91jquery%E5%9C%A8ie6%E4%B8%8B%E6%97%A0%E6%B3%95%E8%AE%BE%E7%BD%AEselect%E9%80%89%E4%B8%AD%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95

版权

前端专栏收录该内容

280 篇文章 0 订阅

订阅专栏

本文主要解决在 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>

刀尖的舞者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jquery】jquery在ie6下无法设置select选中的解决方法

本文主要解决在 ie6 下，jquery 无法设置 select 选中的问题。我们先看个例子： <!DOCTYPE HTML><html lang="en-US"><head> <m...
复制链接

扫一扫