javascript - 选择框：捕获由外部 JavaScript 触发的 onchange 事件？

Question

请仔细阅读标题 - 这不是常见的 onchange 事情。

网页上有一个选择框。选择框其 selectedIndex 可以通过 javascript、外部js 以编程方式更改。

我希望在索引更改时收到通知（跨浏览器解决方案）。这可能吗？

考虑 jsfiddle 示例

或 HTML：

<select id="mySelect">
    <option>opt 1</option>
    <option>opt 2</option>
    <option>opt 3</option>
</select>​

JavaScript：

// Code I cannot manipulate
var select = document.getElementById("mySelect");
select.selectedIndex = 2; // I would like to be notified now

等待您的见解:-)

更新：

这并没有回答我最初的问题，但使用它我设法完成了我最初想要的（不是帖子的一部分）：

select.selectedIndex = 2;
select.onchange();

Answer 1

Javascript 更改事件需要用户发起的浏览器事件。当 JavaScript 本身触发更改时，它们不起作用。

如果你真的想这样做，你应该编写一个函数，<select>使用 , 定期轮询 , 的值setInterval并进行比较。

var selectold =  select.selectedIndex;
setInterval(function(){
    if(selectold != select.selectedIndex)
       {
           console.log("there was a change");
           selectold = select.selectedIndex;

       }
},500);

编辑小提琴

Answer 2

我意识到我间接触发了选择框的变化。这使我能够在那之后进行检查.. 不仅和听众一样好，而且它会起作用并且不会那么脏:-)

至少我得到确认没有这样的事件可以听。谢谢你。

Answer 3

如果您控制更新 selectedIndex 的代码，您可以向其中注入一个回调，这将为您提供类似事件的行为。

/* code that I do not wish/'cannot' change: */
function startSelectScroll(indexChangeCallback) {
    var select = document.getElementById("mySelect");

    var index = 0;
    var myInterval = setInterval( function() { // Change index every 500ms

        index++;
        select.selectedIndex = index % 3;

        indexChangeCallback.call(select);
    }, 500 );

    setTimeout( function() { // Remove automatic change after 3000ms
        clearInterval( myInterval );
        alert(callCount);
    }, 3000 );
}
/* end unmodifiable code */

startSelectScroll(function() {
    callCount++;
});

var callCount = 0;

如果您不控制它，那么您使用的任何框架都应该以相同的方式支持回调。

Answer 4

我首先想到的是；

function alertMe(theSelect) {
    var mySelectList = document.getElementById(theSelect);  
    var result = mySelectList.options[mySelectList.selectedIndex].value;
    alert(result); // Alerts selected option
}

html:

<select id="mySelect" onchange="javascript:alertMe("mySelect")">
    <option value="A"> A text </option>
    <option value="B"> B text </option>
    <option value="C"> C text </option>
<select>

这给出了选定的选项值字段，您还可以获得文本字段，最后将“.value”替换为“.text”..