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后填充。因此，您需要在其上应用mutation observer：

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并在单击时进行消息传递，然后您可以确保在可以访问其余选项的环境中执行上述代码。 / p>

使用javascript

2 个答案: