Can't change selectedIndex on select with javascript

Question

http://info.academyart.edu/programs?&pmcode=PMDIR

On this page, when you choose any option from "Current level of education" select, an new select is shown below ("Program of interest").

I'm trying to change it's value via my chrome extension like this:

var evt = document.createEvent("HTMLEvents");
var program = document.getElementById('Program');
program.selectedIndex = 1;
evt.initEvent("change", true, true);
program.dispatchEvent(evt);

but it won't change. I tried also with this:

var program = document.getElementById('Program');
program.selectedIndex = 1;

but result is the same.

In my code I first select an value in "current level of education" selectbox, if that matters. So, I can change value in any other select on that page, but I can't change it on this one.

What could be the problem?

Answer 1

Dispatching events is only useful when something listens to them. The element in question (#educationLevel) listens to focus, change, and blur events.

The easiest way to create events is with an Event constructor.

function dispatch(el, evType) {
    el.dispatchEvent(new Event(evType));
}

var level = document.getElementById('educationLevel');
dispatch(level, 'focus');
level.selectedIndex = 1;
dispatch(level, 'change');
dispatch(level, 'blur');

However, #Program only listens to focus and blur so you don't need to dispatch the change event.

The actual problem: #Program is empty on load and only gets populated after change on #educationLevel fires. Thus you need to apply a mutation observer on it:

function initMO(root, callback) {
    var MO = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MO(function(mutations) {
        observer.disconnect();
        mutations.forEach(function(mutation){
            callback(mutation.target);
        });
        observe(); // comment this out to run only once
    });
    var opts = { childList: true, subtree: true };
    var observe = function() {
        observer.takeRecords();
        observer.observe(root, opts);
    };
    observe();
}

---

full solution:

function dispatch(el, evType) {
    el.dispatchEvent(new Event(evType));
}
function addMO(root, callback) {
    var MO = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MO(function(mutations) {
        observer.disconnect();
        mutations.forEach(function(mutation){
            callback(mutation.target);
        });
        observe(); // comment this out to run only once
    });
    var opts = { childList: true, subtree: true };
    var observe = function() {
        observer.takeRecords();
        observer.observe(root, opts);
    };
    observe();
}

var level = document.getElementById('educationLevel');
dispatch(level, 'focus');
level.selectedIndex = 1;
dispatch(level, 'change');
dispatch(level, 'blur');

var program = document.getElementById('Program');
addMO(program, function() {
    program.selectedIndex = 1;
});