點擊一個動態創建的選擇使用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(); 
});