使用 jQuery 处理动态生成的 Select 选项值获取问题-小浪学习网

使用 jQuery 处理动态生成的 Select 选项值获取问题

本文将解决在使用 jquery 处理动态生成的 select 选项时，由于 ID 重复导致的值获取错误问题。通过修改 html 结构，将 ID 选择器改为 class 选择器，并优化 jQuery 代码，可以正确获取每个 Select 元素的值，并演示了如何简化代码逻辑，提高代码可读性和维护性。

在使用 jQuery 处理动态生成的 HTML 结构，特别是包含多个 select 元素时，很容易遇到 ID 重复的问题。这会导致 JavaScript 代码无法正确获取或操作特定的元素。本文将针对这一问题，提供一种解决方案，通过使用 Class 选择器替代 ID 选择器，并优化 jQuery 代码，确保能够正确获取每个 select 元素的值。

问题分析

在 HTML 中，ID 属性必须是唯一的。当多个元素具有相同的 ID 时，document.getElementById 方法只会返回第一个匹配的元素，导致后续的元素无法被正确访问。在动态生成 select 元素时，如果错误地使用了相同的 ID，就会出现值获取错误的问题。

解决方案：使用 Class 选择器

为了解决 ID 重复的问题，可以将 select 元素的 ID 属性替换为 Class 属性。Class 属性允许一个元素拥有多个 Class 名称，并且可以在多个元素中使用相同的 Class 名称。

HTML 修改：

将 HTML 代码中的 id=”vulselect” 替换为 class=”form-select”。

<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>

jQuery 代码优化

使用 Class 选择器后，需要相应地修改 jQuery 代码。同时，可以对代码进行优化，使其更加简洁易懂。

优化后的 jQuery 代码：

$(function () {   $(".form-select").change(function () {     console.log(this.value);     //$('#vulmodal').modal("show");      for (var i = 0; i < this.options.Length; i++) {       this.options[i].selected = false;     }   }); });

代码解释：

$(“.form-select”).change(function () { … });：这段代码使用 Class 选择器 .form-select 选中所有具有 form-select Class 的 select 元素，并为它们的 change 事件绑定一个处理函数。
console.log(this.value);：在 change 事件处理函数中，this 关键字指向当前触发事件的 select 元素。this.value 可以获取当前选中的选项的值。
for (var i = 0; i < this.options.length; i++) { this.options[i].selected = false; }：这段代码用于取消所有选项的选中状态。

完整示例代码

<!DOCTYPE html> <html> <head>   <title>jQuery Select Example</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(this.value);       //$('#vulmodal').modal("show");        for (var i = 0; i < this.options.length; i++) {         this.options[i].selected = false;       }     });   }); </script>  </body> </html>