使用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>元素。如果你愿意，可以很容易地向返回值添加一个返回值，该值指示是否存在缺失的元素，并可以报告缺失的元素。