Despite my efforts to find a solution on similar posts, I am still struggling to find the specific answer I need.
I am currently developing a simple chrome extension that aims to streamline the process of filling out a large form with static information. The form itself is fixed and cannot be edited, structured like this:
<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>
Injecting values into text fields has been smooth sailing so far using this method:
document.getElementById("TextField").value = "Text Field Value";
The challenge arises when dealing with multiple select boxes on the form. While pre-filling one value works fine, attempting to select multiple options simultaneously does not. I have experimented with different approaches such as:
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"];
However, none of these methods seem to produce the desired outcome. At times, it only selects the first option, while in other instances nothing happens at all.
In addition, I would prefer to avoid using jQuery if possible.