2

I am looking for a way (or a workaround) to subscribe for selectedIndex changing (on <select> element) when the change done by a simple assignment (like myElement.selectedIndex=1).

<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>

Seems it's not possible, but maybe there is some workaround.
dispatchEvent is not an option (the listener attachment must be done from outside).

My only solution so far, very similar to @jren510 (but I like his solution more).

function myListener() {
    console.log('Yes, I hear...');
}

const originalPropDescriptor = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'selectedIndex');

Object.defineProperty(HTMLSelectElement.prototype, 'originalSelectedIndex', originalPropDescriptor);

Object.defineProperty(HTMLSelectElement.prototype, 'selectedIndex', {
    get() {
        return this.originalSelectedIndex;
    },

    set(value) {
        myListener();
        this.originalSelectedIndex = value;
    }
});

I would like to avoid overriding native methods, by so far it's the only way I see.

Shimon S
  • 4,048
  • 2
  • 29
  • 34
  • `dispatchEvent` is the only option. What do you mean by _“the listener attachment must be done from outside”_? I assume you’ve read posts similar to [Trigger change event by changing selectedIndex of select without jQuery](/q/60687460/4642212). What doesn’t work with `document.getElementById("mySelect").dispatchEvent(new Event("change"));`? – Sebastian Simon Dec 20 '21 at 16:22
  • Inline event handlers like `onchange` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Dec 20 '21 at 16:23
  • @SebastianSimon the problem is that I can not know when the assignment (to selectedIndex) is done, so I can not know when to call dispatchEvent. I'm working on kind of library. (and the inline event is just in purpose of MRE) – Shimon S Dec 20 '21 at 16:32

1 Answers1

2

Maybe not the best answer, but you did mention workarounds..

You can try overriding the setter for the object for which you are trying to detect the change in.

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>1</option>
</select>

<button id="myButton"> change selector value to 1 </button>

It's worth mentioning that the callback does not run when manually changing the select here.. if you want to preserve that behavior, you can add an event listener that calls callback as usual, though there may exist a better solution that captures both cases.

jren510
  • 36
  • 5
  • The best (and the only :) ) solution so far. I did something similar (I will post it also), but seems that yours one is better. – Shimon S Dec 21 '21 at 10:07