数据属性

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属性来实现此目的。

我还建议您回复document.DOMContentLoaded事件，而不是window.load：

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>