给select下拉列表的option添加onclick（点击）事件(兼容IE8, Chrome)

Kinber_XD

已于 2022-04-22 10:39:06 修改

阅读量1.6w

点赞数 16

分类专栏：关于前端 HTML 文章标签： HTML select option option点击事件

于 2019-05-16 16:01:39 首次发布

本文链接：https://blog.csdn.net/Kinber_XD/article/details/90265303

版权

关于前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

1.参考资料：☞☞点我跳转

问题描述：

select的onchange并不能满足所有的业务需求！！比如当我们第一次点击下拉列表的某一个option的时候会触发onchange，但是当我们第二次再次点击相同的option的时候（注意: 此时浏览器认为第一次选中的option与第二次选中的option一致，不会再次触发onchange），但是我们需要的是每次点击或选择option时都触发事件！！

以下代码可解决上述问题，兼容IE8、Chrome ☟ ☟

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试Option选择事件</title>

    <script type="text/javascript">
        /**
         * 第一个参数为下拉列表的id
         * 第二个参数为点击option的回调函数
         * @param idSelector
         * @param callFunc
         */
        function addEventHandle(idSelector, callFunc) {
            var o = document.getElementById(idSelector);
            if (!o) return;
            (function() {
                        o.onclick = function() {
                            var evt = window.event;
                            var selectObj = evt ? evt.srcElement : null;
                            // IE Only
                            if (evt && selectObj && evt.offsetY && evt.button != 2 && (evt.offsetY > selectObj.offsetHeight || evt.offsetY < 0)) {
                                setTimeout(function() {
                                    var option = selectObj.options[selectObj.selectedIndex];
                                    callFunc(option)
                                }, 60);
                            }
                        }
                    }
            )();
        }

        /**
         * 回调函数
         * @param option
         */
        function clickFunc(option) {
            var val = option.getAttribute('value');
            console.log(val);
            alert(val);
        }

        window.onload = function() {
            //给selector绑定option点击
            addEventHandle("selector", clickFunc);
        }
    </script>

</head>
<body>
    <div style="width: 500px;height: 180px;text-align: center;margin: 200px auto;padding: 0px 40px 0px 40px">
        <select id="selector" style="width: 200px;padding: 5px 2px 10px 5px;">
            <option value="我是第一个option">第一个option</option>
            <option value="我是第二个option">第二个option</option>
        </select>
    </div>
</body>
</html>

上述代码亲测可运行, 如有问题, 请各位留言告知 (工作忙, 可能无法及时回复, 请见谅)