如何通过JavaScript实现URL查询字符串自动填充表单功能

直接将以下代码复制到你网页的</body>标签之前即可生效：

document.addEventListener('DOMContentLoaded', function() {
  // 读取URL中的查询参数
  const queryParams = new URLSearchParams(window.location.search);
  // 遍历所有参数键值对
  queryParams.forEach((paramValue, paramName) => {
    // 匹配表单中对应name属性的字段
    const targetField = document.querySelector(`[name="${paramName}"]`);
    if (targetField) {
      // 自动给字段赋值，下拉框会自动选中对应value的选项
      targetField.value = paramValue;
    }
  });
});

代码说明 #

• 页面加载完成后自动执行，无需手动触发
• 通用适配所有带name属性的表单字段，除下拉框外，后续新增输入框、单选框等组件也能自动匹配填充
• 无额外依赖，所有主流现代浏览器（Chrome、Edge、Safari、Firefox等）均原生支持
• 如需同时填充多个字段，参数之间用&拼接即可，例如?Photo=Pelicans&Size=L

测试方法 #

部署代码后访问页面地址，后缀拼接?Photo=Pelicans即可看到Photo下拉框自动选中鹈鹕选项，拼接?Photo=Dolphins则自动选中海豚选项。

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