无法使用javascript更改selectedIndex

Question

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

在此页面上，当您从“当前的教育水平”选择中选择任何选项时，下面将显示一个新的选择（“感兴趣的课程”）。

我正在尝试通过chrome扩展程序更改其值，如下所示：

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

但不会改变。 我也尝试过这个：

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

但是结果是一样的。

在我的代码中，我首先在“当前教育水平”选择框中选择一个值。 因此，我可以在该页面上的任何其他选择中更改值，但不能在此页面上更改它。

可能是什么问题呢？

Answer 1

仅当有人监听事件时，调度事件才有用。 有问题的元素（ #educationLevel ）侦听focus ， change和blur事件。

创建事件的最简单方法是使用Event构造函数。

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');

但是， #Program仅侦听focus和blur因此您不需要调度change事件。

实际的问题 ： #Program是空的负载，仅在被填充change对#educationLevel火灾。 因此，您需要在其上应用一个变异观察者 ：

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();
}

---

完整解决方案：

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;
});

Answer 2

加载页面时，将插入内容脚本，并且可以从F12工具进行查看，这时#Program仅具有一个选项被隐藏。 因此，在显示其余选项后，您的内容脚本将不会被注入并再次执行，这是根本原因。

你应该尝试执行

program.selectedIndex = 1;

例如，在显示隐藏选项之后，您可以在后台脚本中声明一个browserActionListener，并在单击该脚本时进行消息传递通信，然后可以确保在可以访问其余选项的环境中执行上述代码。