JavaScript + jQuery + HTML 实现select效果：选中、取消选中，普通方法Chrome会有BUG

最新推荐文章于 2023-03-01 11:06:28 发布

achi010

最新推荐文章于 2023-03-01 11:06:28 发布

阅读量5.2k

点赞数 1

分类专栏：前端文章标签： Chrome jQuery HTML select option

本文链接：https://blog.csdn.net/achi010/article/details/79734755

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML option 标签的 selected 属性
http://www.w3school.com.cn/tags/att_option_selected.asp

1、一般做WEB的时候，Chrome的兼容性会比较好，但是这里有个特殊的情况，下面的方法，Chrome会有问题。
Chrome版本：版本67.0.3371.0（正式版本）（32 位）

效果图
这里写图片描述

反例如下：（Chrome连续点击resetOption、setOption、resetOption、setOption就会出现问题）

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
    //取消选中
    function resetOption(id) {
        $('#' + id).find("option").each(function() {
            $(this).removeAttr("selected");
        });
    }
    // 选中。这里强调的是：Chrome的BUG（版本67.0.3371.0（正式版本） （32 位））
    function setOption(id, optionID) {
        if (optionID == null) {
            return;
        }
        $('#' + id).find("option").each(function() {
            if ($(this).val() == optionID) {
                $(this).attr("selected", "selected");
            }
        });
    }
</script>
</head>

<body>

    <div>
        <select id="selectID">
            <option value='0'></option>
            <option value='1'>Volvo</option>
            <option value='2' selected="selected">Saab</option>
            <option value='3'>Mercedes</option>
            <option value='4'>Audi</option>
        </select>
        <button type="button" onClick="resetOption('selectID')">resetOption</button>
        <button type="button" onClick="setOption('selectID', '1')">setOption</button>
    </div>

</body>
</html>

正例，推荐以下方法：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
    //取消选中
    function resetOption(id) {
        $('#' + id).find("option").each(function() {
            $(this).removeAttr("selected");
        });
    }
    // 选中。--------------------------这部分代码不同
    function setOption(selectID) {
        var data = [ {
            id : '0',
            name : ''
        }, {
            id : '1',
            name : 'Volvo'
        }, {
            id : '2',
            name : 'Saab'
        }, {
            id : '3',
            name : 'Mercedes'
        }, {
            id : '4',
            name : 'Audi'
        } ];
        // default value
        var id = 'id';
        var name = 'name';
        // empty value
        var option = '<option value="0"></option>';
        // other value
        for ( var i in data) {
            if (selectID != undefined && data[i][id] == selectID) {
                option += '<option value="' + data[i][id] + '" selected="selected" >' + data[i][name] + '</option>';
                continue;
            }
            option += '<option value="' + data[i][id] + '">' + data[i][name] + '</option>';
        }
        $('#selectID').html(option);
    }
</script>
</head>

<body>

    <div>
        <select id="selectID">
            <option value='0'></option>
            <option value='1'>Volvo</option>
            <option value='2' selected="selected">Saab</option>
            <option value='3'>Mercedes</option>
            <option value='4'>Audi</option>
        </select>
        <button type="button" onClick="resetOption('selectID')">resetOption</button>
        <button type="button" onClick="setOption('1')">setOption</button>
    </div>

</body>
</html>

2、测试地址（把上面的代码贴进去，提交代码，右侧就会出现效果）
http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide

achi010

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript + jQuery + HTML 实现select效果：选中、取消选中，普通方法Chrome会有BUG

HTML option 标签的 selected 属性 http://www.w3school.com.cn/tags/att_option_selected.asp1、一般做WEB的时候，Chrome的兼容性会比较好，但是这里有个特殊的情况，下面的方法，Chrome会有问题。 Chrome版本：版本67.0.3371.0（正式版本）（32 位）效果图反例如下：（Chrome连续...
复制链接

扫一扫