JavaScript 实现联动下拉框：在提交前重置依赖下拉框的值-js教程-PHP中文网

JavaScript 实现联动下拉框：在提交前重置依赖下拉框的值

花韻仙語

发布： 2025-07-30 17:04:11

原创

465人浏览过

javascript 实现联动下拉框：在提交前重置依赖下拉框的值

本文档旨在提供一个清晰易懂的解决方案，用于实现联动下拉框功能，并在第一个下拉框的值发生改变时，重置第二个下拉框的值，确保提交的数据是基于最新的选择。通过使用 jQuery，我们可以轻松地监听下拉框的 change 事件，并在事件处理函数中重置依赖下拉框的值，从而避免提交旧数据的问题。

实现联动下拉框重置功能的步骤

要实现当第一个下拉框的值改变时，重置第二个下拉框的值，并提交表单，可以采用以下步骤：

引入 jQuery 库: 确保你的 HTML 文件中已经引入了 jQuery 库。可以通过 CDN 引入，例如：
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
登录后复制

HTML 结构: 创建包含两个下拉框的 HTML 结构。重要的是将两个下拉框包含在同一个 <form> 元素中。

立即学习“Java免费学习笔记（深入）”；

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

<form>
  <select class="form-select mb-3" id="first" name="first">
      <option value="1" >Hello</option>
      <option value="2" >World</option>
  </select>

  <select class="form-select mb-3" id="second" name="second">
      <option value="1" >Hello</option>
      <option value="2" >World</option>
  </select>
</form>

登录后复制

JavaScript 代码: 使用 jQuery 监听两个下拉框的 change 事件。在事件处理函数中，判断是哪个下拉框触发了事件。如果是第一个下拉框，则重置第二个下拉框的值，并提交表单。
```
$('#first, #second').on('change', e =>{

  if($(e.target).is('#first')){
    $('#second').val('');
  }

  e.target.form.submit();

});
```
登录后复制
代码解释:
- $('#first, #second').on('change', e => { ... });: 这行代码使用 jQuery 选择器选取了 id 为 first 和 second 的两个下拉框，并为它们的 change 事件绑定了一个处理函数。
- if($(e.target).is('#first')){ ... }: e.target 指的是触发事件的 DOM 元素。 $(e.target).is('#first') 使用 jQuery 的 is() 方法检查触发事件的元素是否是 id 为 first 的下拉框。
- $('#second').val('');: 如果第一个下拉框触发了事件，这行代码将 id 为 second 的下拉框的值设置为空字符串，从而重置了它的值。
- e.target.form.submit();: 这行代码提交了包含两个下拉框的表单。 e.target 是触发事件的 DOM 元素（即下拉框），e.target.form 访问了包含该下拉框的表单元素，然后调用了表单的 submit() 方法来提交表单。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>联动下拉框重置示例</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<form>
  <select class="form-select mb-3" id="first" name="first">
      <option value="1" >Hello</option>
      <option value="2" >World</option>
  </select>

  <select class="form-select mb-3" id="second" name="second">
      <option value="1" >Hello</option>
      <option value="2" >World</option>
  </select>
</form>

<script>
  $('#first, #second').on('change', e =>{

    if($(e.target).is('#first')){
      $('#second').val('');
    }

    e.target.form.submit();

  });
</script>

</body>
</html>

登录后复制

注意事项

确保你的 HTML 文件中已经包含了 jQuery 库。
这个示例假设你的表单提交是通过 JavaScript 完成的。如果你的表单是通过传统的 HTML 方式提交，你需要阻止默认的表单提交行为，并使用 JavaScript 来处理表单提交。
根据实际需求，你可能需要修改代码来适应不同的表单结构和提交方式。