是否可以监听 selectedIndex 的变化？

Question

当通过简单分配（如myElement.selectedIndex=1 ）完成更改时，我正在寻找一种方法（或解决方法）来订阅selectedIndex更改（在<select>元素上）。

<select id = "mySelect" onchange="myListener()">
    <option>0</option>
    <option>1</option>
</select>

<script>
    function myListener() {
        console.log('Yes, I hear...'); // doesn't work on selectedIndex assignment
    }
    document.getElementById('mySelect').selectedIndex = 1;
</script>

似乎不可能，但也许有一些解决方法。
dispatchEvent不是一个选项（侦听器附件必须从外部完成）。

Answer 1

也许不是最好的答案，但你确实提到了解决方法..

您可以尝试覆盖您尝试检测更改的 object 的设置器。

 let mySelect = document.getElementById("mySelect"); const callback = () => { console.log("Yes, I hear..."); }; const original = Object.getOwnPropertyDescriptor( Object.getPrototypeOf(mySelect), "selectedIndex" ); Object.defineProperty(mySelect, "selectedIndex", { set: function (t) { callback(); return original.set.apply(this, arguments); }, get: function () { return original.get.apply(this); } }); let myButton = document.getElementById("myButton"); myButton.addEventListener("click", () => { mySelect.selectedIndex = 1; });

 <select id="mySelect"> <option>0</option> <option id="option1">1</option> </select> <button id="myButton"> change selector value to 1 </button>

值得一提的是，在此处手动更改 select 时，回调不会运行。如果您想保留该行为，可以添加一个像往常一样调用callback的事件侦听器，尽管可能存在一个更好的解决方案来捕获这两种情况。

Answer 2

我的回答有点晚了。 您可以使用select.dispatchEvent(new Event('change')); .

 function myListener() { console.log('Yes, I hear...'); // doesn't work on selectedIndex assignment } select = document.getElementById('mySelect'); select.dispatchEvent(new Event('change'));

 <select id = "mySelect" onchange="myListener()"> <option>0</option> <option>1</option> </select>