如何使 select 选项从 ci 3 中的数据库中获取并在文本字段中自动填充结果？

Question

I want to make select option fetched from database in codeigneter 3 and display result in text field and into span area. I made it like this, it becomes one in the views file. However, when selected, all data displayed is only data from row_name.

<?php $query = $this->db->get('mydb_table'); ?>
<select id="select_id" required>
    <option>Select Account</option>
    <?php foreach ($query->result() as $d) : ?>
        <option value="<?= $d->row_name ?>">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(){
        $("#account_name").val($(this).val());
        $("#account_code").val($(this).val());
        $("#account_category").text($(this).text());
    }); 
</script>

I hope the result is that all ids appear in the selection options, and when one of them is selected in the input field it will display the name and code data according to the selected data., then the text span displays the category.

Maybe it looks like in this gif image selectoption.gif

Table Name: mydb_table row = row_id, row_name, row_code, row_category row_id is a primary AUTO_INCREMENT

in my database looks like:

INSERT INTO `mydb_table` (`row_id`, `row_name`, `row_code`, `row_category`) VALUES
(1, 'john Doe', 'bc34', 'premium'),
(2, 'Emili Doe', 'ac67', 'standard'),
(3, 'Jev Doe', 'abc2', 'premium'),
(4, 'Rachel Doe', '234a', 'standard');

Answer 1

Use data attribute in <option> , later in js you will get this data attribute

<?php foreach ($query->result() as $d) : ?>
    <option value="<?= $d->row_id ?>" data-code="<?= $d->row_code ?>" data-category="<?= $d->row_category ?>" data-name="<?= $d->row_name ?>">Account Name : <?= $d->row_name ?></option>
<?php endforeach; ?>

Then, add listener when <select> is on change

<script>
//please always set inside document ready function
$(document).ready(function() {
    $("#select_id").change(function(){
        $("#account_name").val($(this).data('name')); //get data-name attribute and set it to element with id account_name
        $("#account_code").val($(this).data('code')); //get data-code attribute and set it to element with id account_code
        $("#account_category").html($(this).data('category')); //get data-category attribute and set it to element with id account_category
    });
}); 
</script>