关于select 在不同浏览器下的jquery操作兼容性问题

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="res/js/jquery-1.12.3.js"></script>-->
    <script type="text/javascript" src="res/js/jquery-1.12.3.js"></script>
</head>
<body>
    <label>城市</label>
        <select id="city" >
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
            <option value="5">成都</option>
        </select>

    <button class="btn" id="get_value">获取</button>
    <button class="btn" id="set_value">根据value设置</button>
    <button class="btn" id="set_text">根据text设置</button>

<script>
        $(".btn").click(function() {
            var id = $(this).attr('id');
            if (id == "get_value") {
                s1 = $("#city option:selected").text();//获取选中option文本
                alert(s1);
            }
            if (id === "set_value") {
                 $("#city").find("option[value='2']").attr("selected", true); //该方法在非IE浏览器下只能第一次有效(IE下面完全正常），原因为
              //  $("#city").val('2'); //根据value值选中option，这个是首选，简单高效
            }
            if (id === "set_text") {
                 $("#city option:contains(杭州)").attr("selected",true);  //貌似只能用一次(但在IE下面完全正常）
            }
    });
</script>
</body>
</html>

可以确定，相同的js操作不停切换，在IE下均正常。在Chrome下异常，只能工作一次。之前还以为是layui的锅。这次完全不用layui也这样。一切换IE浏览器就正常了。

posted @ 2022-10-04 00:14  IT情深  阅读(51)  评论(0)  编辑  收藏  举报