chrome.tabs.executeScriptを使用して複数選択フィールドを設定する

Question

私はここで類似のクエリを調べましたが、私が探している回答を見つけるのには苦労しています。

私は非常に基本的なクロムエクステンションを書いています。ユーザーは頻繁に使用されるフォームを埋め込むことができます（基本的に1つのフォームがあり、ユーザーは完了する必要があります。

フォーム自体は私のものではありませんので、私は全くそれを編集することはできませんし、それは次のように設定しています：

<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>要素を無視します。必要に応じて、関数に戻り値を追加するのは簡単です。これは、欠落した要素があるかどうかを示し、欠落していた要素を報告できます。