Question

您好，我有一个有趣的。

我目前正在为我的工作中的侧面项目开发一个小型Chrome扩展程序。扩展程序只是在页面的右侧附加一个div并提供快速链接＆＃39;为用户提供输入。而不是尝试单击树状菜单，选择正确的选项，然后更改textarea。我的扩展程序上有按钮，可以设置值，然后单击“应用”。我们的网络应用程序有一堆动态加载<select>。有一个包含链接的树状菜单。当选择树菜单中的项目时，它将动态加载包含<select>的几个div。

我想要做的是以编程方式更改所选的选项，该选项应该依次触发由web-app处理的另一个事件来调用某些动态内容。

选择将转到正确的值，但是网络应用程序不会将其注册为任何更改。

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

编辑

网络应用程序的工作方式是（以下逻辑已融入网络应用程序，我无法控制）：

项。这将ping回家并动态地将一些内容加载到蓝色选择中。
由于蓝色选择发生变化，触发change事件，绿色选择动态加载。
由于绿色选择触发了change事件，它将再次动态更新textarea值。

我想要做的是一旦加载了所有内容，我希望能够更改绿色选择的值，这应该使web-app触发更改并更新textarea，即

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

会给我们

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

但不幸的是，选择会改变，但不会触发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

您应该为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属性值之一相对应。

如果您的网络应用程序收听了选择的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();
});

Answer 2

<强>解决方案

由于Chrome扩展程序在沙盒环境中运行，因此在尝试与DOM中的对象进行交互时，其结果不可靠。我需要做的是将一个脚本注入包含我的class Vehicle attr_accessor :seatbelt_on, :time_used, :auto_shop_busy state_machine :state, :initial => :parked do before_transition :parked => any - :parked, :do => :put_on_seatbelt after_transition :on => :crash, :do => :tow after_transition :on => :repair, :do => :fix after_transition any => :parked do |vehicle, transition| vehicle.seatbelt_on = false end ...事件的页面。

这是我在扩展程序加载content_script.js时运行的代码：

change()

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

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

上述脚本的功劳归于另一个StackOverflow用户。我无法找到链接。我只是将它分成一个函数，以便重用它而不会出现混乱。

示例

对于基本示例，我的扩展有一个div，它通过包含按钮的content_script.js注入页面。单击该按钮时，我希望它将（通过webapp）动态添加的选择更改为页面。由于扩展是沙盒，因此它无法正确触发更改事件。

<强>注意事项

在我的扩展程序中，该按钮绑定到将调用：$("#buttonInExtensionDiv").click(function(){ function injectCode(code){ var newScript = document.createElement('script'); newScript.appendChild(document.createTextNode( code )); (document.body || document.head || document.documentElement).appendChild(newScript); } });的单击处理程序。

每次点击该按钮，扩展名都会附加

injectCode('updateSelect()');

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

单击动态创建的选择以使用Javascript / jQuery

2 个答案: