如何将表单选项选择脚本中的jQuery document ready改为原生JavaScript？

没问题！把jQuery的$(document).ready()换成原生JavaScript其实很简单，而且有几种适配不同场景的方案，我结合你提到的表单选择脚本场景给你详细说明：

1. 使用DOMContentLoaded事件（最接近jQuery ready的实现） #

这是原生JS里和jQuery ready功能最匹配的方式——它会在DOM结构完全加载完成（不需要等待样式、图片等资源加载）时触发，适合需要在DOM就绪后执行的逻辑。

原jQuery代码示例： #

$(document).ready(function() {
  // 表单选择逻辑：监听下拉框变化
  $('#product-select').on('change', function() {
    const selectedValue = $(this).val();
    console.log('选中的产品ID：', selectedValue);
    // 这里可以添加更多表单处理逻辑，比如显示对应选项详情
  });
});

替换后的原生JS代码： #

document.addEventListener('DOMContentLoaded', function() {
  // 原生方式获取表单元素（支持ID、类名、选择器，类似jQuery）
  const selectElement = document.getElementById('product-select');
  // 或者用querySelector，支持更灵活的选择器：
  // const selectElement = document.querySelector('#product-select');

  // 绑定change事件
  selectElement.addEventListener('change', function() {
    const selectedValue = this.value; // 原生直接获取值，无需$()包裹
    console.log('选中的产品ID：', selectedValue);
    // 你的表单处理逻辑继续在这里写
  });
});

2. 将脚本放在</body>标签末尾 #

这是更简洁的方案：当浏览器解析到</body>前的脚本时，页面上的DOM元素已经全部加载完成，不需要额外监听事件。

示例写法： #

<body>
  <!-- 你的表单HTML -->
  <select id="product-select">
    <option value="1">笔记本电脑</option>
    <option value="2">智能手机</option>
    <option value="3">平板电脑</option>
  </select>

  <!-- 脚本直接放在body末尾 -->
  <script>
    const selectElement = document.getElementById('product-select');
    selectElement.addEventListener('change', function() {
      console.log('选中的产品：', this.options[this.selectedIndex].text);
    });
  </script>
</body>

这种方式性能更优，因为省去了事件监听的开销，适合内联脚本或者小型项目。

3. 使用defer属性加载外部脚本 #

如果你的表单脚本是外部文件，可以在<script>标签上添加defer属性，这样脚本会在DOM加载完成后执行，同时不会阻塞页面渲染（脚本下载和页面解析并行进行）。

示例写法： #

<head>
  <!-- 外部脚本添加defer属性 -->
  <script src="form-handler.js" defer></script>
</head>
<body>
  <!-- 你的表单HTML -->
</body>

form-handler.js里的代码可以直接写逻辑，不需要包裹事件监听：

const selectElement = document.getElementById('product-select');
selectElement.addEventListener('change', function() {
  // 表单处理逻辑
});

几个关键注意点 #

• 原生JS获取元素：用getElementById()（按ID查找）、querySelector()（支持CSS选择器，类似jQuery的$()）、querySelectorAll()（获取多个元素）
• 事件绑定：用addEventListener()替代jQuery的.on()，支持绑定多个同类型事件
• 获取表单值：直接用element.value，下拉框的选中文本可以用element.options[element.selectedIndex].text

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