vanilla Javascript 版本的 attr('selected'， true)

Question

不使用JQuery如何转换

$('#H10 option[value*="2"]').attr('selected',true).trigger('change')

转换成普通Javascript。我相信使用dispatchEvent(new Event("))将取代trigger()，但我找不到attr()函数的任何东西。当我尝试使用:

时

document.querySelector('#H10 option[value*="2"]').setAttribute('selected', 'selected').dispatchEvent(new Event('change'))

我得到Uncaught TypeError:不能读取未定义的属性(读取'dispatchEvent')。我还尝试过其他方法，包括使用selected() = true

感谢您的帮助。

Answer 1

不像jQuery的方法，所有的DOM方法不一定返回this，例如setAttribute()返回undefined.
这意味着你不能像在jQuery中那样链接调用。

您应该将元素存储在变量中，设置其属性，然后调用其dispatchEvent方法。

const option = document.querySelector('#H10 option[value*="2"]');
option.setAttribute('selected', 'selected');
option.dispatchEvent(new Event('change'));

<div id="H10">
<select>
<option value="abc">abc</option>
<option value="123">123</option>
</select>
</div>