使用chrome.tabs.executeScript來填充多個選擇字段

Question

我在這裏看過類似的查詢，但我努力尋找我正在尋找的答案。我正在寫一個非常基本的Chrome擴展，這將允許用戶填充常用的表單（基本上有一種形式是巨大的，用戶必須完成，但很多信息從不改變）。

形式本身是不是我的，所以我不能在所有的編輯和它的設置是這樣的：

<select multiple="multiple" id="SelectField"> 
    <option value="Option 1">Option 1</Option> 
    <option value="Option 2">Option 2</Option> 
    <option value="Option 3">Option 3</Option> 
</select> 

我使用以下將值注入到文本字段，而這沒有造成任何問題：

document.getElementById("TextField").value = "Text Field Value"; 

我遇到的問題是有一堆的形式在多個選擇框，並在我只需要預先填寫一個值的情況下，上述工作正常。但是，如果我需要選擇多個選項，它將無法工作。

我已經試過各種天真的嘗試，如：

document.getElementById("SelectField").value = "Option 1","Option 3"; 
document.getElementById("SelectField").values = "Option 1","Option 3"; 
document.getElementById("SelectField").value = ["Option 1","Option 3"]; 
document.getElementById("SelectField").values = ["Option 1","Option 3"]; 

不過，當然沒有這些的都在工作。在某些情況下，它會選擇第一個選項，在其他情況下則不會。

如果可能的話，我寧願不使用jQuery。

在多個選項的情況下

Answer 1

選擇您需要先添加（如果它們不是一個多選擇）

document.getElementById("SelectField").multiple = true; 

那麼你可以做

document.getElementById("SelectField").options[0].selected=true; 
document.getElementById("SelectField").options[1].selected=true; 

或

document.querySelector('#SelectField option[value="Option1"]').selected = true 

Answer 2

對於<select multiple="true">元素，您可以設置每個人的selected屬性<option>元素。

你可以使這樣的事情：

var optionsToSelect = ["Option 1","Option 3"]; 
 

 
optionsToSelect.forEach(option => { 
 
    document.querySelector('#SelectField option[value="'+option+'"]').selected = true; 
 
});

<select multiple="multiple" id="SelectField"> 
 
    <option value="Option 1">Option 1</Option> 
 
    <option value="Option 2">Option 2</Option> 
 
    <option value="Option 3">Option 3</Option> 
 
</select>

您是拉一些記錄這些信息了JSON的。這意味着您可能正在對多個元素進行選擇，並且JSON數據可能包含目前不存在的選項或不存在的<select>元素的ID。因此，應該使用更通用，更高效和更強大的東西。顯然，它變得有點複雜得多：

var optionsToSelect = ["Option 1","Option 3"]; 
 

 
setMultipleOptionsById('SelectField',optionsToSelect); 
 

 
function setMultipleOptionsById(id,selectedOptions) { 
 
    let selectEl = document.getElementById(id); 
 
    if(selectEl){ 
 
     selectedOptions.forEach(option => { 
 
      let optionEl = selectEl.querySelector('option[value="'+option+'"]'); 
 
      if(optionEl) { 
 
       optionEl.selected = true; 
 
      } 
 
     }); 
 
    } 
 
}

<select multiple="multiple" id="SelectField"> 
 
    <option value="Option 1">Option 1</Option> 
 
    <option value="Option 2">Option 2</Option> 
 
    <option value="Option 3">Option 3</Option> 
 
</select>

目前，上述功能只是靜靜地忽略任何缺少<select>或<option>元素。如果你願意，可以很容易地向返回值添加一個返回值，該值指示是否存在缺失的元素，並可以報告缺失的元素。