单击动态创建的select，使用Javascript/jQuery选择其他动态内容

Question

你好，我玩得很开心。

目前，我正在为我的工作中的一个附带项目做一个小型Chrome扩展。这个扩展只是将一个div附加到页面的右侧，并为用户提供“快速链接”和输入。不要尝试通过树菜单单击，选择正确的选项，然后更改文本区域。我的扩展名上有按钮，它们可以在其中设置值并单击apply。正在发生的事情是，我们有一个网络应用程序，它有一堆动态加载的<select>。有一个包含链接的树菜单。当选择了树菜单中的项时，它将动态地加载几个包含<select>的div。

我想要做的是通过编程更改所选选项，这个选项将触发另一个由web应用程序处理的事件，以调用一些动态内容。

select将转到正确的值，但web应用程序并没有将其注册为任何更改。

*编辑*是页面外观的一个示例：https://jsfiddle.net/tpkn92o8/6

在下面编辑

web应用程序的工作方式(以下逻辑被放入web应用程序中，我对此没有控制)：

1. 选择了“树”菜单中的项。这将平家和动态加载一些内容到蓝色选择。
2. 由于蓝色select被更改，这将触发change事件和绿色select来动态加载。
3. 再次，由于绿色select触发了一个change事件，它将动态更新textarea值。

我想要做的是，一旦加载了所有内容，我希望能够更改绿色选择的值，这将使web应用程序触发更改并更新文本区域，即

$("#dynamic-content-2 select").val('some new value').change()

会给我们

<textarea value="some new value"></textarea>

但不幸的是，select将被更改，但不会触发要更新的textarea

第二次编辑

var updatedVal = 'a new value I get from an array';
window.addEventListener ("load", setupEventHandlers, false);

function setupEventHandlers(){
    var jsInitChecktimer = setInterval (checkForJS_Finish, 111);
    function checkForJS_Finish () {
        // the select I want to manipulate gets loaded when the radio is checked and a different select has a certain value
        if ( document.querySelector("#myRadio:checked") && $("#parentSelect").val() == "100" ) {
            clearInterval (jsInitChecktimer);
            console.log('loaded');

            $("#changeSelect_Button").on("click", function () {

                $("#mySelect").val(updatedVal).change();

            });
        }
    } 
}

Answer 1

溶液

由于Chrome扩展是在沙箱环境中运行的，所以当尝试与DOM中的对象交互时，它的结果是不可靠的。我需要做的是向包含我的change()事件的页面中注入一个脚本。

下面是通过扩展加载content_script.js时运行的代码：

var injectedCode = 
    'function changeSelect(newVal) { '+
        '$("#pageSelect").val(newVal).change();'+
    '}';
var script = document.createElement('script');
script.appendChild(document.createTextNode( injectedCode ));
(document.body || document.head || document.documentElement).appendChild(script);

下面是我点击按钮时注入的代码：

$("#buttonInExtensionDiv").click(function(){
    function injectCode(code){
        var newScript = document.createElement('script');
        newScript.appendChild(document.createTextNode( code ));
        (document.body || document.head || document.documentElement).appendChild(newScript);
    }
});

上面的脚本归功于另一个StackOverflow用户。我找不到链接。我只是把它分割成一个函数，以便在没有杂乱的情况下重复使用它。

示例

作为基本示例，我的扩展有一个div，它通过包含一个按钮的content_script.js注入到页面上。当单击该按钮时，我希望它更改一个被动态添加到页面的选择(由webapp添加)。由于扩展是沙箱的，所以没有正确地触发更改事件。

警告

在我的扩展中，该按钮绑定到一个单击处理程序，该处理程序将调用：injectCode('updateSelect()');。

每次单击该按钮时，该分机都会追加。

<script>injectCode('updateSelect()');</script>

到DOM的末尾，这增加了混乱。

Answer 2

应该为您的value元素的option属性赋值。因此，改变：

<option val='load-something-1'>Option 2.1</option>

至：

<option value='load-something-1'>Option 2.1</option>

或者，如果您需要自定义的val属性，那么也可以添加value属性。

其次，您尝试了以下代码：

$("#dynamic-content-2").val('some new value').change();

..。但这会改变div的值。看看你的小提琴，你应该给select (这个div的子)一个值如下：

$("#dynamic-content-2>select").val('some new value').change();

作为参数给出的值应该对应于value标记的一个option属性值。

如果您的web应用程序监听了select的change事件，它就会工作。

下面是一些受您的小提琴启发的HTML代码：

    <div id="dynamic-content-2" class='fifty'>
        <select size="3">
            <option value='load-something-1'>Option 2.1</option>
            <option value='load-something-2'>Option 2.2</option>
            <option value='load-something-3'>Option 2.3</option>    
        </select>
    </div>

还有一些演示工作原理的JavaScript：

// Mimic the web-app, about which we have no information:
$('#dynamic-content-2>select').change(function (e) {
    $("textarea").val('Option ' + (this.selectedIndex+1) + ' was selected.');
});

// On page load, select the second option and trigger the change event
$(function () {
    $('#dynamic-content-2>select').val('load-something-2').change();
});