使用 jQuery 处理动态生成的 Select 选项并弹出 Modal-js教程-PHP中文网

使用 jQuery 处理动态生成的 Select 选项并弹出 Modal

DDD

发布： 2025-08-22 23:54:24

原创

213人浏览过

使用 jquery 处理动态生成的 select 选项并弹出 modal

本文旨在解决在使用 jQuery 处理动态生成的 Select 选项时，遇到的 ID 重复导致事件绑定和数据获取不正确的问题。通过修改 HTML 结构，使用 Class 代替 ID，并简化 jQuery 代码，实现正确获取每个 Select 选项的值，并触发相应的 Modal 弹出。文章将提供详细的代码示例和解释，帮助开发者避免类似错误，提升前端开发效率。

避免重复 ID：使用 Class 选择器

在 HTML 中，ID 必须是唯一的。当在循环中生成多个 Select 元素时，如果都赋予相同的 ID，会导致 JavaScript 无法正确识别和操作这些元素。document.getElementById 总是返回页面上第一个匹配的元素。

解决方案是将 ID 替换为 Class。Class 可以被多个元素共享，更适合用于批量操作。

错误示例：

<tr>
  <td class="client">client001</td>
  <td class="User">user001</td>
  <td class="Vulnerabilites">
    <select class="form-select" size="4" id="vulselect">
      <option value="2705">Security Vulnerability CVE-2018-1285 for log4net</option>
      <option value="73562">Security Vulnerability CVE-2022-39427 in VirtualBox</option>
    </select>
  </td>
</tr>

<tr>
  <td class="client">client002</td>
  <td class="User">user002</td>
  <td class="Vulnerabilites">
    <select class="form-select" size="4" id="vulselect">
      <option value="68069">Security Vulnerability CVE-2021-34803 for TeamViewer</option>
      <option value="74465">Security Vulnerability CVE-2023-21899 in VirtualBox</option>
    </select>
  </td>
</tr>

登录后复制

正确示例：

<tr>
  <td class="client">client001</td>
  <td class="User">user001</td>
  <td class="Vulnerabilites">
    <select class="form-select" size="4">
      <option value="2705">Security Vulnerability CVE-2018-1285 for log4net</option>
      <option value="73562">Security Vulnerability CVE-2022-39427 in VirtualBox</option>
    </select>
  </td>
</tr>

<tr>
  <td class="client">client002</td>
  <td class="User">user002</td>
  <td class="Vulnerabilites">
    <select class="form-select" size="4">
      <option value="68069">Security Vulnerability CVE-2021-34803 for TeamViewer</option>
      <option value="74465">Security Vulnerability CVE-2023-21899 in VirtualBox</option>
    </select>
  </td>
</tr>

登录后复制

简化 jQuery 代码：使用 this 关键字

在事件处理函数中，this 关键字指向触发事件的元素。利用 this，可以避免重复选择元素，使代码更简洁。

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

错误示例：

$(function () {
  $(".form-select").each(function () {
    $(this).change(function () {
      var e = document.getElementById("vulselect");
      var value = e.value;
      alert(value);
      $('#vulmodal').modal("show");

      var elements = document.getElementById("vulselect").options;
      for (var i = 0; i < elements.length; i++) {
        elements[i].selected = false;
      }
    });
  });
});

登录后复制

正确示例：

$(function () {
  $(".form-select").change(function () {
    console.log(this.value);
    //$('#vulmodal').modal("show"); // 假设存在一个 id 为 vulmodal 的 modal

    for (var i = 0; i < this.options.length; i++) {
      this.options[i].selected = false;
    }
  });
});

登录后复制

代码解释：

$(".form-select").change(function () { ... });：为所有 class 为 form-select 的元素绑定 change 事件。
this.value：获取当前触发 change 事件的 Select 元素的选中值。
this.options：获取当前 Select 元素的所有 Option 元素。
this.options[i].selected = false;：取消选中所有 Option 元素。

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>Select 选项处理</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <table>
    <tbody>
      <tr>
        <td class="client">client001</td>
        <td class="User">user001</td>
        <td class="Vulnerabilites">
          <select class="form-select" size="4">
            <option value="2705">Security Vulnerability CVE-2018-1285 for log4net</option>
            <option value="73562">Security Vulnerability CVE-2022-39427 in VirtualBox</option>
          </select>
        </td>
      </tr>

      <tr>
        <td class="client">client002</td>
        <td class="User">user002</td>
        <td class="Vulnerabilites">
          <select class="form-select" size="4">
            <option value="68069">Security Vulnerability CVE-2021-34803 for TeamViewer</option>
            <option value="74465">Security Vulnerability CVE-2023-21899 in VirtualBox</option>
          </select>
        </td>
      </tr>

    </tbody>
  </table>

  <script>
    $(function () {
      $(".form-select").change(function () {
        console.log("Selected value:", this.value);
        // $('#vulmodal').modal("show"); // 假设存在一个 id 为 vulmodal 的 modal

        // 取消选中所有选项
        for (var i = 0; i < this.options.length; i++) {
          this.options[i].selected = false;
        }
      });
    });
  </script>

</body>
</html>

登录后复制

注意事项：

确保引入 jQuery 库。
根据实际需求，修改 Modal 弹出的代码。
如果 Select 选项是通过 AJAX 动态加载的，需要在加载完成后再绑定事件。可以使用 $(document).on('change', '.form-select', function() { ... }); 委托事件。

总结

通过避免重复 ID，使用 Class 选择器，以及利用 this 关键字，可以有效地解决在 jQuery 中处理动态生成的 Select 选项时遇到的问题。遵循这些最佳实践，可以编写出更简洁、高效、可维护的前端代码。

以上就是使用 jQuery 处理动态生成的 Select 选项并弹出 Modal的详细内容，更多请关注php中文网其它相关文章！