本文介绍在使用 Bootstrap 模态窗编辑记录时，通过 AJAX 从数据库获取已关联的选项 ID，并在前端下拉列表（<select>）中精准高亮对应 <option> 元素的完整实现方案。
本文介绍在使用 bootstrap 模态窗编辑记录时，通过 ajax 从数据库获取已关联的选项 id，并在前端下拉列表（`
在 Web 表单编辑场景中，常需回显“多对多”关系数据（例如：旅游设施关联的多种配套类型）。典型需求是：打开编辑模态窗后，自动加载该记录在数据库中已勾选的 acomp_type_id 列表，并在 <select class="acomp_types"> 下拉框中将对应 <option> 标记为黄色背景，以直观提示用户当前选中状态。
但原始代码存在两个关键问题：
- 数据结构误判：AJAX 返回的是对象数组（如 [{"acomp_type_id":"1"}, ...]），而原逻辑直接用 $.inArray(item_id, selected_items) 尝试匹配字符串与对象，必然失败；
- DOM 查找逻辑错误：$("#modal_form").find(".acomp_types") 匹配的是整个 <select> 元素，而非其内部 <option>，且后续用 data("acomp_type_id") 试图从 <select> 上读取属性，不符合 HTML 结构。
✅ 正确做法是：
- 在 AJAX 成功回调中遍历 selected_items 数组，提取每个对象的 acomp_type_id 字段；
- 使用原生 DOM 或 jQuery 精准定位 <select id="acomp_types"> 下 value 匹配的 <option> 元素；
- 直接设置其 style.backgroundColor = "yellow" 实现高亮。
以下是优化后的完整 JavaScript 逻辑（兼容 jQuery 且更健壮）：
$('#modal_form').on('shown.bs.modal', function () {
const myID = id; // 确保 id 变量已正确定义
$.ajax({
url: "<?php echo base_url('index.php/tourist_facilities/highlight_selected_items');?>/",
type: "GET",
dataType: "json",
data: { id: myID },
success: function(selected_items) {
// 安全获取 select 元素（推荐使用 ID 而非 class，避免歧义）
const $select = $("#acomp_types");
if ($select.length === 0) return;
// 遍历返回的每个对象，提取 acomp_type_id
$.each(selected_items, function(index, item) {
const acompTypeId = item.acomp_type_id;
// 查找 value 匹配的 option 并高亮
const $option = $select.find(`option[value="${acompTypeId}"]`);
if ($option.length) {
$option.css("backgroundColor", "yellow");
// 可选：同步选中状态（若需默认选中）
$option.prop("selected", true);
}
});
},
error: function(xhr) {
console.warn("Failed to load selected items:", xhr.responseText);
}
});
});? 重要注意事项：
- 后端 PHP 方法 highlight_selected_items() 已正确返回 JSON 数组，无需额外 JSON.parse()；
- 前端务必确保 <select> 元素具有唯一 id="acomp_types"（而非仅靠 class），否则 getElementById 或 $("#acomp_types") 可能失效；
- 若下拉项由动态渲染生成，请确保 AJAX 执行前 DOM 已就绪（shown.bs.modal 事件已保证模态窗完全显示）；
- 生产环境建议使用 CSS 类（如 .selected-option { background: #fff9c4; }）替代内联样式，便于主题维护；
- 为防止 XSS，acompTypeId 若含特殊字符（如引号），应使用 encodeURIComponent 或服务端转义，但此处 ID 为数字，可暂不处理。
通过以上实现，即可在编辑时精准还原数据库中的多选状态，并提供清晰的视觉反馈，显著提升用户体验与数据一致性。
