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

使用chrome.tabs.executeScript填充多选字段

2 个答案: