Verwenden von chrome.tabs.executeScript zum Füllen mehrerer Felder

Question

Ich habe hier nach ähnlichen Abfragen gesucht, aber ich habe Mühe, die Antwort zu finden, nach der ich suche.

Ich schreibe eine sehr einfache Chrome-Erweiterung, die es Benutzern ermöglicht, häufig verwendete Formulare zu füllen (im Grunde gibt es ein Formular, das riesig ist, die Benutzer ausfüllen müssen, aber viele der Informationen ändern sich nie).

Die Form selbst ist nicht von mir, also kann ich es überhaupt nicht bearbeiten und es ist so aufgebaut:

<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> 

ich folgendes zu injizieren Werte in Textfelder verwendet, und das ist keine Probleme verursacht:

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

das Problem, das ich habe, ist es ein Bündel von mehreren Auswahlbox auf dem Formular ist, und in Fällen, in denen ich brauche nur einen Wert vorab zu füllen, arbeitet die oben in Ordnung. Wenn ich jedoch mehrere Optionen auswählen muss, funktioniert es nicht.

Ich habe verschiedene naiven Versuche versucht, wie zum Beispiel:

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"]; 

Aber natürlich keiner von ihnen arbeiten. in einigen Fällen wählt es die erste Option, in anderen Fällen gar nichts.

Ich würde auch lieber nicht jQuery wenn überhaupt möglich.

Answer 1

im Falle von mehreren Optionen auswählen, die Sie hinzufügen, zuerst müssen (wenn sie nicht ein Vielfaches wählt sind)

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

dann können Sie

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

oder

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

Answer 2

tun Für <select multiple="true"> Elemente haben Sie die selected Eigenschaft auf jedem einzelnenfestgelegtElement.

Sie könnten so etwas wie dieses:

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>

Sie ziehen diese Informationen aus JSON von einem Rekord. Das bedeutet, dass Sie möglicherweise Auswahlen für mehrere Elemente treffen und dass die JSON-Daten möglicherweise Optionen enthalten, die zu diesem Zeitpunkt nicht vorhanden sind, oder IDs für <select> Elemente, die nicht vorhanden sind. Daher sollte etwas, das ein wenig generischer, effizienter und robuster ist, verwendet werden. Offensichtlich wird es etwas komplizierter:

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>

Derzeit ist die obige Funktion nur ignoriert ruhig alle fehlenden <select> oder <option> Elemente. Wenn Sie möchten, wäre es einfach, der Funktion einen Rückgabewert hinzuzufügen, der angibt, ob ein Element fehlt, und welches Element fehlt.