如何利用edit_book函数响应为表单子分类字段添加selected属性？

核心思路 #

1. 全局存储当前编辑书籍的子分类ID，供分类切换时使用
2. 加载子分类选项时，对比全局存储的子分类ID，自动添加selected属性
3. 优化AJAX逻辑，避免重复渲染选项

修正后的完整代码 #

// 全局变量：存储当前编辑书籍的子分类ID
let currentBookSubcat = null;

/* 分类切换时加载对应子分类 */
$('#book_cat').change(function(){
    const catId = $(this).val();
    const $subcatSelect = $('#book_subcat');
    
    // 清空现有子分类选项
    $subcatSelect.empty();
    
    $.ajax({
        type: "POST",
        url: "<?php echo site_url('book/populate_subcats'); ?>",
        data: {id: catId},
        dataType: 'json',
        success:function(data){
            // 遍历子分类数据生成选项
            $.each(data, function(subcatId, subcatName){
                const $option = $('<option />', {
                    value: subcatId,
                    text: subcatName
                });
                // 如果当前子分类ID等于编辑书籍的子分类ID，添加selected属性
                if (currentBookSubcat == subcatId) {
                    $option.prop('selected', true);
                }
                $subcatSelect.append($option);
            });
            // 触发change事件确保表单状态更新
            $subcatSelect.trigger('change');
        },
        error: function(){
            alert('加载子分类失败');
        }
    });
});

// 获取书籍数据并填充表单
function edit_book(id) {
    save_method = 'update';
    $('#form')[0].reset();
    
    $.ajax({
        url: "<?php echo site_url('book/get_row/') ?>" + id,
        type: "GET",
        dataType: "JSON",
        success: function(data) {
            // 保存当前书籍的子分类ID到全局变量
            currentBookSubcat = data.book_subcat;
            
            // 设置主分类并触发change加载子分类
            $('[name="book_cat"]').val(data.book_cat).trigger('change');
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('获取书籍数据失败');
        }
    });
}

关键改动说明 #

1. 新增全局变量：currentBookSubcat用来存储当前编辑书籍的子分类ID，避免在分类切换时重复请求书籍数据
2. 移除错误代码：删除了原代码中错误拼接URL、解析无效JSON以及重复渲染选项的逻辑
3. 优化选项生成逻辑：
   • 使用jQuery的$('<option />', {属性})语法更简洁地创建选项
   • 在生成选项时直接对比currentBookSubcat，匹配则添加selected属性
4. 简化流程：编辑书籍时只需要设置主分类并触发change，子分类加载完成后会自动选中对应选项，无需额外手动设置子分类值

数据库结构确认（保持原结构即可） #

TABLE `books` (
  `book_id` INT PRIMARY KEY AUTO_INCREMENT,
  `book_cat` INT, -- 关联book_cats.cat_id
  `book_subcat` INT -- 关联book_subcats.subcat_id
);

TABLE `book_cats` (
  `cat_id` INT PRIMARY KEY AUTO_INCREMENT,
  `cat_name` VARCHAR(255) NOT NULL
);

TABLE `book_subcats` (
  `subcat_id` INT PRIMARY KEY AUTO_INCREMENT,
  `subcat_name` VARCHAR(255) NOT NULL,
  `parent_id` INT -- 关联book_cats.cat_id
);

内容的提问来源于stack exchange，提问作者janeiro