如何在 CodeIgniter 3 中实现下拉框联动填充文本框与标签内容-php教程-PHP中文网

如何在 CodeIgniter 3 中实现下拉框联动填充文本框与标签内容

本文详解如何在 CodeIgniter 3 中从数据库动态加载下拉选项，并通过 data-* 属性绑定多字段数据，实现在选择后自动填充对应名称、编码和分类到输入框与标签中。

本文详解如何在 codeigniter 3 中从数据库动态加载下拉选项，并通过 `data-*` 属性绑定多字段数据，实现在选择后自动填充对应名称、编码和分类到输入框与 `` 标签中。

在 CodeIgniter 3 开发中，常需将数据库中的记录（如账户信息）以 <select></select> 下拉形式呈现，并在用户选择某一项后，同步展示其关联的多个字段（如名称、编码、分类），而非仅传递单一值。原始实现中仅用 value="= $d->row_name ?>" 导致所有字段丢失，无法精准映射；正确方案是利用 HTML5 的 data-* 自定义属性，在 <option></option> 中预存完整数据，再通过 jQuery 高效提取并填充。

✅ 正确实现步骤

1. 视图层：动态渲染带数据属性的 `<option></option>`

确保每个 <option></option> 的 value 使用唯一主键（如 row_id），同时用 data-* 属性嵌入其他字段：

<?php $query = $this->db->get('mydb_table'); ?>
<select id="select_id" required><option value="">Select Account</option>
<?php foreach ($query->result() as $d): ?>
        <option value="<?= $d->row_id ?>" data-name="<?= htmlspecialchars($d->row_name) ?>" data-code="<?= htmlspecialchars($d->row_code) ?>" data-category="<?= htmlspecialchars($d->row_category) ?>">
            Account ID: = $d->row_id ?> — = $d->row_name ?>
        </option>
<?php endforeach; ?></select>

⚠️ 注意：使用 htmlspecialchars() 防止 XSS，尤其当数据库内容含特殊字符时。

2. 表单区域：预留目标元素

保持结构清晰，为各字段分配唯一 ID：

CodeIgniter 4.7.0

CodeIgniter下载页提供 CodeIgniter 4.7.0 官方源码包，并整理框架安装、数据库配置与入门开发说明。

下载

<div class="input-group mb-3">
    <input id="account_name" type="text" class="form-control" readonly placeholder="Account Name">
</div>
<div class="input-group mb-3">
    <input id="account_code" type="text" class="form-control" readonly placeholder="Account Code">
</div>
<small>Account category: <span id="account_category"></span></small>

3. 脚本层：监听变更并安全填充

务必包裹在 $(document).ready() 中，确保 DOM 加载完成后再绑定事件；使用 .data() 方法读取 data-* 属性（jQuery 自动处理类型转换）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
$(document).ready(function() {
    $('#select_id').on('change', function() {
        const $selected = $(this).find(':selected');
        $('#account_name').val($selected.data('name') || '');
        $('#account_code').val($selected.data('code') || '');
        $('#account_category').text($selected.data('category') || '—');
    });
});
</script>