Can’t change selectedIndex on select with javascript Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Can’t change selectedIndex on select with javascript without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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;
});
We are here to answer your question about Can’t change selectedIndex on select with javascript - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji