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

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

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

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

错误示例：lt；trgt； lt；td class=quot；clientquot；gt；client001lt；/tdgt； lt；td class=quot；Userquot；gt；user001lt；/tdgt； lt；td class=quot；Vulnerabilitesquot；gt； lt；select class=quot；form-selectquot； size=quot；4quot； id=quot；vulselectquot；gt； lt；option value=quot；2705quot；gt；log4net 的安全漏洞 CVE-2018-1285lt；/optiongt； lt；option value=quot；73562quot；gt；VirtualBox 中的安全漏洞 CVE-2022-39427lt；/optiongt； lt；/selectgt； lt；/tdgt；lt；/trgt；lt；trgt； lt；td class=quot；clientquot；gt；client002lt；/tdgt； lt；td class=quot；Userquot；gt；user002lt；/tdgt； lt；td class=quot；Vulnerabilitesquot；gt； lt；select class=quot；form-selectquot； size=quot；4quot； id=quot；vulselectquot；gt； lt；option value=quot；68069quot；gt；TeamViewer 安全漏洞 CVE-2021-34803lt；/optiongt； lt；option value=quot；74465quot；gt；VirtualBox 安全漏洞 CVE-2023-21899lt；/optiongt； lt；/selectgt； lt；/tdgt；lt；/trgt；登录后复制

正确示例：lt；trgt； lt；td class=quot；clientquot；gt；client001lt；/tdgt； lt；td class=quot；Userquot；gt；user001lt；/tdgt； lt；td class=quot；Vulnerabilitesquot；gt； lt；select class=quot；form-selectquot； size=quot；4quot；gt； lt；option value=quot；2705quot；gt；log4net 的安全漏洞 CVE-2018-1285lt；/optiongt； lt；option value=quot；73562quot；gt；VirtualBox 中的安全漏洞 CVE-2022-39427lt；/optiongt； lt；/se

lectgt； lt；/tdgt；lt；/trgt；lt；trgt； lt；td class=quot；clientquot；gt；client002lt；/tdgt； lt；td class=quot；Userquot；gt；user002lt；/tdgt； lt；td class=quot；Vulnerabilitesquot；gt； lt；select class=quot；form-selectquot； size=quot；4quot；gt； lt；option value=quot；68069quot；gt；TeamViewer 安全漏洞 CVE-2021-34803lt；/optiongt； lt；option value=quot；74465quot；gt；VirtualBox 安全漏洞 CVE-2023-21899lt；/optiongt； lt；/selectgt； lt；/tdgt；lt；/trgt；登录后复制简化 jQuery 代码：使用此 关键字

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

错误示例：$(function () { $(quot；.form-selectquot；).each(function () { $(this).change(function () { var e = document.getElementById(quot；vulselectquot；)； var value = e.value；alert(value)； $('#vulmodal').modal(quot；showquot；)； var elements = document.getElementById(quot；vulselectquot；).options； for (var i = 0； i lt； elements.length； i ) { elements[i].selected = false； } })； })；})；登录后复制

正确示例：$(function () { $(quot；.form-selectquot；).change(function () { console.log(this.value)； //$('#vulmodal').modal(quot；showquot；)； // 假设存在一个 id 为 vulmodal 的 modal for (var i = 0； i lt； this.options.length； i ) { this.options[i].selected = false； } })；})；登录后复制

代码解释：$(".form-select").change(function () { ... })；：为所有类为 form-select 的元素绑定change事件。

this.value：获取当前触发改变事件的Select元素的选中值。this.options：获取当前Select元素的所有Option元素。this.options[i].selected = false；：取消选中所有Option元素。

完整示例lt；!DOCTYPE htmlgt；lt；htmlgt；lt；headgt；lt；titlegt；选择选项处理lt；/titlegt；lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jsquot；gt；lt；/scriptgt；lt；/headgt；lt；bodygt；lt；tablegt；lt；tbodygt；lt；trgt；lt；td class=quot；clientquot；gt；client001lt；/tdgt；lt；td class=quot；Userquot；gt；user001lt；/tdgt；lt；td class=quot；Vulnerabilitesquot；gt；lt；select class=quot；form-selectquot；size=quot；4quot；gt；lt；option value=quot；2705quot；gt；安全漏洞log4net 的 CVE-2018-1285lt；/optiongt； lt；option value=quot；73562quot；gt；VirtualBox 中的安全漏洞 CVE-2022-39427lt；/optiongt； lt；/selectgt； lt；/tdgt； lt；/trgt； lt；trgt； lt；td class=quot；clientquot；gt；client002lt；/tdgt； lt；td class=quot；Userquot；gt；user002lt；/tdgt； lt；td class=quot；Vulnerabilitesquot；gt； lt；select class=quot；form-selectquot； size=quot；4quot；gt； lt；option value=quot；68069quot；gt；TeamViewer 的安全漏洞 CVE-2021-34803lt；/optiongt； lt；option value=quot；74465quot；gt；VirtualBox 中的安全漏洞 CVE-2023-21899lt；/optiongt； lt；/selectgt； lt；/tdgt； lt；/trgt； lt；/tbodygt； lt；/tablegt； lt；scriptgt； $(function () { $(quot；.form-selectquot；).change(function () { console.log(quot；Se

selected value：quot；， this.value)； // $('#vulmodal').modal(quot；showquot；)； // 假设一个id为vulmodal的modal //取消选中所有选项 for (var i = 0； i lt； this.options.length； i ) { this.options[i].selected = false； } })； })； lt；/scriptgt；lt；/bodygt；lt；/htmlgt；登录后复制

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

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

以上就是使用 jQuery 处理动态生成的 Select 并弹出 Modal 的详细内容，更多请关注乐哥常识网其他相关文章！