无法使用 javascript 更改 select 上的 selectedIndex

Question

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

在此页面上，当您从 "Current level of education" select 中选择任何选项时，下面会显示一个新的 select ("Program of interest")。

我正在尝试通过我的 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;

但结果是一样的

在我的代码中，如果重要的话，我首先 select 在 "current level of education" select 框中输入一个值。因此，我可以更改该页面上任何其他 select 的值，但我无法更改此页面上的值。

可能是什么问题？

Answer 1

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

您应该尝试执行

program.selectedIndex = 1;

隐藏选项显示后，比如你可以在你的后台脚本中声明一个browserActionListener，在点击它的时候进行消息通信，这样就可以保证上面的代码在其他选项可以访问的环境下执行.

Answer 2

调度事件只有在监听事件时才有用。有问题的元素 (#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 on #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;
});

无法使用 javascript 更改 select 上的 selectedIndex

Can't change selectedIndex on select with javascript

javascript

html

dom

google-chrome-extension

selectedindex