如何用普通Javascript替换jQuery change和val方法

购物车包含jQuery代码，用于附加事件处理程序并在外部小部件中设置值：

$(function () { 
  $("#smartpost_select0" ).change(function() {
    var valik = $('#smartpost_select0').val();
    $('.js-transportselect-radio').prop("checked", false);
    if (valik==='-') {
      $('#Field1').val('');
      } else {
      $('#Field1').val('SMARTPOST'+valik);
      $('#Field2').val('SMARTPOST');

   };
    
  });

  });

smartpost\u select0

由外部小部件通过外部Javascript文件创建。

Field1

和

Field2

是由应用程序创建的输入类型=文本字段

.js transportselect radio

类和字段由应用程序创建

如何更改此代码以删除jQuery依赖项？是否存在附加更改处理程序和切换选中属性的本机方法？

addEventListener（）

是本机等效于

on（）

checked

和

value

是元素对象的属性，因此不需要像jQuery的

attr（）

或

prop（）

这样的方法。类似地，

querySelector（）

和

queryselectoral（）

允许您使用CSS样式选择器检索DOM元素

document.addEventListener（'DOMContentLoaded'，（）=>{
设field1=document.querySelector（“#field1”）；
设field2=document.querySelector（“#field2”）；
document.querySelector（'#smartpost_select0'）。addEventListener（'change'，e=>{
document.querySelectorAll（'.js transportselect radio'）.forEach（el=>el.checked=false）；
设valik=e.target.value；
如果（valik=='-'）{
field1.value=''；
}否则{
field1.value='SMARTPOST'+valik；
field2.value='SMARTPOST'；
}
});
}); 

---

为便于将来参考，该网站提供了一个将jQuery方法转换为本机JS的有用参考。

$（'smartpost_select0'）.val（）

到

document.querySelector（'smartpost_select0'）。value

$（'#Field2'）。val（'smartpost'）到

document.querySelector（'Field2'）。value='smartpost'

$（'Field2'）。更改（function（）{…}）
到
document.querySelector（'.'）。addEventListener（'change'，function（）{…}）
$（'.'）。prop（key，value）
到
document.querySelector（'.'）。setAttribute（key，value）
如何替换change和prop方法？为什么
DOMContentLoad
也起作用？这是一个未定义的事件。我不确定，因为这是我的一个输入错误-没有
DOMContentLoad
事件。