データ属性のドロップダウン自動選択

Question

このコードを使用して、ドロップダウンでオプションを自動選択します。どのように値を一致させるように変更することができますか？data-id属性？

window.onload = function(){ 
     document.getElementsByName("program")[0].value=+param1; 
    } 
<select name="program"> 
    <option data-id="1234" value="567">text</option> 
<option data-id="897" value="65475">text</option> 
</select> 

Answer 1

あなたはquerySelector()とその属性値を探し、見つかったオプションのselected属性を設定することによってそれを行うことができます。

私はまた、代わりにwindow.loadのdocument.DOMContentLoadedイベントに応答することをお勧め：

document.addEventListener('DOMContentLoaded', function() { 
 
    document.querySelector('option[data-id="1234"]') 
 
      .setAttribute('selected', 'selected'); 
 
});

<select> 
 
    <option data-id="12" value="7">other option</option> 
 
    <option data-id="1234" value="567">select this</option> 
 
</select>