CodeIgniter3从数据库获取下拉选项并自动填充表单字段

原代码的核心问题：

• <option> 仅将 row_name 存入 value 属性，JS 逻辑里所有输入框都直接调用这个值，导致所有字段显示相同内容
• 分类字段错误使用了选项的显示文本（$(this).text()），而非对应的 row_category 数据

我们需要把每条数据的 row_name、row_code、row_category 都存储在 <option> 的自定义 data-* 属性中，选中选项时直接读取对应字段的值即可。同时建议将 value 设为唯一的 row_id（主键更可靠）。

修正后的完整代码 #

<?php 
// 注：CodeIgniter 最佳实践是在控制器中查询数据再传递给视图，此处保留原写法
$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="<?= $d->row_name ?>" 
            data-code="<?= $d->row_code ?>" 
            data-category="<?= $d->row_category ?>"
        >
            Account id. <?= $d->row_id ?>
        </option>
    <?php endforeach ?>
</select>

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

<script>
    $("#select_id").change(function(){
        // 获取当前选中的option元素
        const selectedOpt = $(this).find("option:selected");
        // 从自定义data属性中读取对应值并赋值
        $("#account_name").val(selectedOpt.data('name'));
        $("#account_code").val(selectedOpt.data('code'));
        $("#account_category").text(selectedOpt.data('category'));
    }); 
</script>

关键修改点说明 #

1. <option> 属性优化：
   • value 改为 row_id（主键作为唯一标识，后续后端验证或扩展更可靠）
   • 添加 data-name、data-code、data-category 三个自定义属性，分别存储对应字段的真实数据
2. JS逻辑调整：
   • 先定位到选中的 <option> 元素，而非直接使用下拉框的 val()
   • 通过 .data() 方法读取自定义属性的值，精准赋值给对应输入框和span标签

额外优化建议 #

• 遵循MVC架构，不要在视图中直接执行数据库查询：
  控制器示例：

  public function your_page() {
      $data['accounts'] = $this->db->get('mydb_table')->result();
      $this->load->view('your_view_file', $data);
  }
  

  视图中直接循环 $accounts 数组即可，代码结构更清晰。

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