在CodeIgniter中如何根据数据库返回的特定下拉选项显示Div

问题分析 #

你的代码核心逻辑方向正确，但存在两个关键问题导致功能失效：

1. 值匹配错误：JS中判断选项值等于'Pawn'，但下拉选项的value实际是数据库返回的$loan_type->loan_reference，如果这个字段的值不是'Pawn'（比如是'PAWN'、'pawn'或其他编码），判断会直接失效。
2. 初始化未检查：页面加载时如果默认选中了Pawn选项，不会触发change事件，导致目标Div不会自动显示。

修正后的代码 #

1. 优化HTML（添加初始隐藏样式）

给collateral Div添加style="display:none;"，避免页面加载时短暂闪现：

<div class="mb-3 col-md-6" id="collateral" style="display:none;">
    <label class="form-label">Collateral Image (Pawn Loan) </label>
    <input type="file" class="form-control-file" name="collateral_image"  id="ci">
</div>

下拉框代码保持不变，但要提前确认Pawn对应的loan_reference实际值（可通过数据库查询或页面调试查看）。

2. 简化并修正JavaScript

$(document).ready(function(){
    // 获取DOM元素
    const $loanType = $('#loan_type');
    const $collateralDiv = $('#collateral');
    const $collateralInput = $('#ci');
    
    // 替换为数据库中Pawn对应的loan_reference实际值（区分大小写）
    const targetLoanValue = 'Pawn';

    // 定义显示/隐藏逻辑的函数
    function toggleCollateral() {
        const selectedValue = $loanType.val();
        if (selectedValue === targetLoanValue) {
            $collateralDiv.show();
            $collateralInput.prop('required', true);
        } else {
            $collateralDiv.hide();
            $collateralInput.prop('required', false);
        }
    }

    // 页面加载时先执行一次，处理默认选中的情况
    toggleCollateral();

    // 下拉框变化时触发逻辑
    $loanType.change(toggleCollateral);
});

关键注意事项 #

• 值匹配：必须确保targetLoanValue和数据库中Pawn类型对应的loan_reference值完全一致（包括大小写），比如数据库存的是'PAWN'，就把targetLoanValue改成'PAWN'。
• jQuery依赖：确保页面已经正确引入jQuery库，否则JS代码无法执行。

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