点击一个动态创建的选择使用Javascript/jQuery选择其他动态内容

Question

你好，我有一个有趣的。

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

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

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

*** ***编辑 这里的页面是什么样子的例子：https://jsfiddle.net/tpkn92o8/6

编辑下面

在web-app的工作原理是这样的（以下逻辑被烘焙到网络应用程序，我无法控制这个）：

1. 在树形菜单中的项被选中。这将ping家，并动态地加载一些内容到蓝色选择。
2. 由于蓝色选择被改变，触发change事件，绿色选择动态获取加载。
3. 再次由于绿色选择触发了一个change事件，它将动态更新textarea值。

我想要做的是，一旦一切都装，我希望能够改变绿色的价值选择，这将使在web-app触发这种改变和更新textarea的，即

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

会给我们

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

但不幸的是，选择会得到改变，但不会触发TE xtarea更新

其次编辑

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扩展程序中运行一个沙盒环境，它在尝试与ob交互时有不可靠的结果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用户。我找不到链接。我只是将它分成了一个函数，以便重复使用它而不会混乱。

例

对于基本例如，我的延伸部具有被通过包含一个按钮content_script.js注入到页面一个div。当单击该按钮时，我希望它将（通过webapp）动态添加的选择更改为该页面。由于扩展程序是沙盒，因此不能正确地触发更改事件。

注意事项

里面我的分机号，按钮连接到一个点击处理程序将调用：injectCode('updateSelect()');。

的每一次点击该按钮，扩展会追加

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

到添加了混乱的DOM结束。

Answer 2

你应该赋值给您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(); 

...但是，改变div的价值。看你的小提琴，你应该给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(); 
});