How to detect change in a property of DOM?

Question

When I change item in selectbox, a property of DOM seems changed. So I coded below:

<select id="hoge">
<option value="0">hoge</option>
<option value="1">piyo</option>
</select>

<script>
var hoge = document.getElementById("hoge").addEventListener("change", func, false);
document.getElementById("hoge").value = 1; // <- (1)

function func(e) {
alert("Detected!");
}
</script>

In this case, when I change item in selectbox, func is called. But when (1) is called, func is not called. Change event seems to detect only committed by the user.

So I tried MutationObserver.

<select id="hoge">
<option value="0">hoge</option>
<option value="1">piyo</option>
</select>

<script>
var hoge = new MutationObserver(function(mutations) {
alert("Detected!");
});
hoge.observe(document.getElementById("hoge"), { attributes: true, subtree: true });
document.getElementById("hoge").options[1].setAttribute("selected", "selected"); // <- (1)

</script>

In this case, when (1) is called, func is called. But when I change item in selectbox, func is not called. MutationObserver seems to detect only attributes.

I want to call func in either case. How to I detect change in a property of DOM by script?

Answer 1

I think there are 2 ways you can try:
1st is manually handle the on change event, without considering event bubble or propagation, then call onchange right after you change the value of element. Like this:

var myEle = document.getElementById("hoge");
myEle.value = 1; // <- (1)
myEle.onchange()

2nd is to make it naturally like browsers work, then try to create and dispatch event on that element. Like this:

if ("createEvent" in document) {
    var event = document.createEvent("HTMLEvents");
    event.initEvent("change", false, true);
    myEle.dispatchEvent(event);
} else
    myEle.fireEvent("onchange");