如何无需重载页面即可设置下拉菜单的选中选项

提问内容 #

我有一个供用户提交拨号代码和手机号码的简易表单，新增数据入库时运行正常，但编辑已有数据实例时出现了问题。我在数据库中将dialcode和phone number都存为integer类型，例如阿尔及利亚的拨号代码存为213，手机号存为1234567890。

我初步找到了解决方案但仍存在问题：现有代码功能符合预期，但必须重载页面才能执行。请问如何让下方代码和姓名、邮箱、推特账号、手机号等其余数据一样，仅在页面加载时执行一次？

换句话说，已知目标值的前提下，如何直接设置下拉菜单的选中选项？

<script type="text/javascript">

  //select tag
  let country_code = document.getElementById("country_code_dropdown");    
  
  //set correct option according to numeric value:
  window.onload = function(){
    //get current dial code value:
    let dialCode = document.getElementById("country_phone_code_input").value; //357

    //Loop through
    Array.from(document.querySelector("#country_code_dropdown").options).forEach(function(option_element) {
        let option_value = option_element.value;

        if(option_value == dialCode){ //if value matches:
          option_element.selected = true; //set <option> to selected: true
          document.getElementById("phone_number_input").innerHTML  = "+" + option_value; //and change span
        }
    });
  };
</script> 

阶段1：
#

阶段2：
#

解决方案 #

可用修复代码 #

document.addEventListener('DOMContentLoaded', function () {
  const targetDialCode = document.getElementById('country_phone_code_input').value;
  // 原生select支持直接赋值设置选中项，无需遍历
  const dropdown = document.getElementById('country_code_dropdown');
  dropdown.value = targetDialCode;
  // 用textContent替代innerHTML避免XSS风险，性能更高
  document.getElementById('phone_number_input').textContent = '+' + targetDialCode;
});

问题原因及优化说明 #

1. 原代码用window.onload需要等页面所有资源（图片、样式、字体等）全部加载完成才会执行，加载延迟高，且同一页面绑定多个window.onload时只有最后一个会生效，容易出现逻辑不执行的问题。换成DOMContentLoaded事件，DOM结构渲染完成就会执行，时机更早也支持多事件绑定互不冲突。
2. 不需要遍历所有option判断匹配，原生<select>元素直接给value属性赋值，只要存在对应value的option就会自动选中，代码更简洁，性能更好。

如果你的表单是动态加载的（比如单页应用点编辑按钮才渲染表单，无整页刷新），可以把逻辑封装为可复用函数，表单渲染完成后手动调用即可：

function setDialCodeSelected() {
  const dialCodeInput = document.getElementById('country_phone_code_input');
  const dropdown = document.getElementById('country_code_dropdown');
  const prefixSpan = document.getElementById('phone_number_input');
  // 元素不存在时直接退出避免报错
  if (!dialCodeInput || !dropdown || !prefixSpan) return;
  const targetCode = dialCodeInput.value;
  dropdown.value = targetCode;
  prefixSpan.textContent = '+' + targetCode;
}
// 页面加载时执行一次
document.addEventListener('DOMContentLoaded', setDialCodeSelected);
// 动态渲染表单完成后手动调用：setDialCodeSelected()

内容的提问来源于stack exchange，提问作者programming_ritual