设为首页收藏本站

Java自学者论坛

 找回密码
 立即注册

手机号码，快捷登录

恭喜Java自学者论坛（https://www.javazxz.com）已经为数万Java学习者服务超过8年了！积累会员资料超过10000G+！
成为本站VIP会员，下载本站10000G+会员资源，会员资料板块，购买链接：点击进入购买VIP会员
Java自学者论坛»论坛 › IT知识库 › WEB前端 › 【jquery】jquery 在 ie6 下无法设置 select 选中的解决 ...

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习（CNN RNN GAN）算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万！人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
返回列表 发新帖
查看: 604|回复: 0

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

[复制链接]
admin
  • TA的每日心情
    奋斗
    2024-11-24 15:47

    • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-9-1 12:51:58 | 显示全部楼层 |阅读模式
    本站已经为数万IT学习者服务超过8年！成为本站VIP会员，免金币下载本站10000G+VIP会员资料！       所有VIP资料>>

    本文主要解决在 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.id + '">' + serversLists.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.id + '">' + serversLists.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.id + '">' + serversLists.name + '</option>';
    }
    return serversHtml;
};
$(function(){
    $('#gameZone').html(showZone());
    try{
        $.each($('#gameZone > option'),function(){
            if($(this).val() == 'dx1'){
                $(this).attr('selected','selected');
            }
        });
    }catch(e){}
});
</script>

     

    select
    哎...今天够累的，签到来了1...
    回复

    使用道具 举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-12-22 01:14 , Processed in 0.059206 second(s), 27 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表