如何在编辑记录时从数据库加载并高亮显示已选列表项-java教程-PHP中文网

如何在编辑记录时从数据库加载并高亮显示已选列表项

本文介绍在使用 Bootstrap 模态窗编辑记录时，通过 AJAX 从数据库获取已关联的选项 ID，并在前端下拉列表（）中精准高亮对应元素的完整实现方案。

本文介绍在使用 bootstrap 模态窗编辑记录时，通过 ajax 从数据库获取已关联的选项 id，并在前端下拉列表（`

在 Web 表单编辑场景中，常需回显“多对多”关系数据（例如：旅游设施关联的多种配套类型）。典型需求是：打开编辑模态窗后，自动加载该记录在数据库中已勾选的 acomp_type_id 列表，并在

但原始代码存在两个关键问题：

数据结构误判：AJAX 返回的是对象数组（如 [{"acomp_type_id":"1"}, ...]），而原逻辑直接用 $.inArray(item_id, selected_items) 尝试匹配字符串与对象，必然失败；
DOM 查找逻辑错误：$("#modal_form").find(".acomp_types") 匹配的是整个上读取属性，不符合 HTML 结构。

✅ 正确做法是：

AVC.AI

AVC.AI是一款提供图片和视频增强、修复、上色和抠图的在线 AI 工具平台。

下载

在 AJAX 成功回调中遍历 selected_items 数组，提取每个对象的 acomp_type_id 字段；
使用原生 DOM 或 jQuery 精准定位
直接设置其 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);
        }
    });
});

? 重要注意事项：