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

Click a dynamically created select to select other dynamic content using Javascript/jQuery

本文关键字：选择 动态 其他 jQuery 使用 创建 单击 Javascript      更新时间：2023-09-26

你好，我玩得很开心。

我目前正在为我工作的一个附带项目开发一个小型Chrome扩展。扩展只是将一个div附加到页面的右侧，并为用户提供带有输入的"快速链接"。不要试图点击树菜单，而是选择正确的选项，然后更改文本区域。我在我的扩展上有按钮，他们可以在那里设置值并单击应用。现在的情况是，我们有一个web应用程序，它有一堆动态加载的<select>。有一个包含链接的树菜单。当树菜单中的一个项目被选中时，它将动态加载更多包含<select>的div。

我想做的是通过程序更改所选选项，该选项将关闭web应用程序处理的另一个事件，以调用一些动态内容。

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

***已编辑***以下是该页面的外观示例：https://jsfiddle.net/tpkn92o8/6

编辑下方

web应用程序的工作方式是（以下逻辑被烘焙到web应用程序中，我对此无法控制）：

  1. 选择树菜单中的项目。这将ping home并将一些内容动态加载到蓝色select中
  2. 由于蓝色选择被更改，这将触发change事件和绿色选择动态加载
  3. 由于绿色选择再次触发change事件，它将动态更新文本区域值

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

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

会给我们

<textarea value="some new value"></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();
            });
        }
    } 
}

您应该为option元素的value属性赋值。所以改变：

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

但是这改变了CCD_ 11的值。看着你的小提琴，你应该给select（这个div的子项）一个值，如下所示：

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

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

如果你的网络应用程序监听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();
});

解决方案

由于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注入到页面上。当点击该按钮时，我希望它能更改（由网络应用程序）动态添加到页面中的选择。由于扩展是沙盒式的，它没有正确地启动更改事件。

注意事项

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

每次我点击该按钮，扩展就会附加

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

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

相关文章：