How to make the option value include more than 1 value?

Question

I have a problem to show the 4 different data in the input fields. I have create the onchange function to get the 1 value in the input field, but how to get other different data to show in the other fields:

Below is my coding:

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Move to Sub Folder/New Category<span style="color:red;">&nbsp;*</span></label>
    <div class="col-lg-3">
        <select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
            <option>Please Select</option>
            <option value="New Category_value">New Category</option>

            <?php
            $sql_incharge = 'select * from filing_code_management where status=1 order by id';
            $arr_incharge = db_conn_select($sql_incharge);

            foreach ($arr_incharge as $rs_incharge) {
                $folder_location      = $rs_incharge['folder_location'];
                $function_code_select = $rs_incharge['function_code'];
                $function_name_select = $rs_incharge['function_name']
                $activity_code_select = $rs_incharge['activity_code']
                $activity_name_select = $rs_incharge['activity_name']

                echo '<option value="' . $rs_incharge['function_code'] . '">' . $rs_incharge['name'] . '</option>';

            }
            ?>
        </select> 
        &nbsp;&nbsp;
        <!--<input type="text" class="form-control blank" id="parentid" name="parentid" title="parentid" onblur="capitalize(this.id, this.value);">-->
    </div>
</div>

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Function Code:</label>
        <div class="col-lg-3">
        <input type="text" class="form-control" id="function_code" name="function_code" title="function_code" value="">
    </div>
</div>

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Function Name:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="function_name" name="function_name" title="function_name">
     </div>
</div>

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Activity Code:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="activity_code" name="activity_code" title="activity_code">
     </div>
</div>

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Activity Name:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="activity_name" name="activity_name" title="activity_name">
    </div>
</div>

<script>

function getComboA(selectObject) {
    var value = selectObject.value;
    document.getElementById("function_code").value =value;
    document.getElementById("function_name").value =value;
    document.getElementById("activity_code").value =value;
    document.getElementById("activity_name").value =value;
}

<script>

Now my output show me the 4 same data in the input fields, like below the picture: Output 1

Actually I want to show the 4 different data, now I just grab the first data using this code $rs_incharge['function_code'], how let these $rs_incharge['function_name'], $rs_incharge['activity_code']$rs_incharge['activity_name'] can show the different field, hope someone can guide me solve this problem. Thanks.

Answer 1

You should store the data in additional attributes in the <option> itself then get the values onchange and then perform your operation. This should help you.

<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
    <option selected disabled>Please Select</option>
    <!--Make this selected by default-->
    <option value="New Category_value" data-act_code="Your-default-act-code" data-act_name="Your-default-act-name">New Category</option

    <?php

    $sql_incharge = 'select * from filing_code_management where status=1 order by id';
    $arr_incharge = db_conn_select($sql_incharge);

    foreach ($arr_incharge as $rs_incharge) {
        $folder_location      = $rs_incharge['folder_location'];
        $function_code_select = $rs_incharge['function_code'];
        $function_name_select = $rs_incharge['function_name']
        $activity_code_select = $rs_incharge['activity_code']
        $activity_name_select = $rs_incharge['activity_name']

        // save the data here↓↓ in data attributes 
        echo "<option value='{$function_code_select}' data-act_code='{$activity_code_select}' data-act_name='{$activity_name_select}'>{$function_name_select}</option>";

    }

    ?>
</select>

Then in your script

<script>

function getComboA(selectObject) {

    let func_code = selectObject.value; // get the value of selected option
    let func_name = selectObject.selectedOptions[0].textContent; // get the text of selected option
    let act_code  = selectObject.selectedOptions[0].getAttribute("data-act_code"); // get attribute of selected option
    let act_name  = selectObject.selectedOptions[0].getAttribute("data-act_name"); // get attribute of selected option

    document.getElementById("function_code").value = func_code;
    document.getElementById("function_name").value = func_name;
    document.getElementById("activity_code").value = act_code;
    document.getElementById("activity_name").value = act_name;
}

</script>

Below is the quick demo of what I am talking about-

function getComboA(selectObject) {

  let func_code = selectObject.value; // get the value of selected option
  let func_name = selectObject.selectedOptions[0].textContent; // get the text of selected option
  let act_code = selectObject.selectedOptions[0].getAttribute("data-act_code"); // get attribute of selected option
  let act_name = selectObject.selectedOptions[0].getAttribute("data-act_name"); // get attribute of selected option

  document.getElementById("function_code").value = func_code;
  document.getElementById("function_name").value = func_name;
  document.getElementById("activity_code").value = act_code;
  document.getElementById("activity_name").value = act_name;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
  <option selected disabled>Please Select</option>
  <!--Make this selected by default-->
  <option value="New Category_value" data-act_code="Your-default-act-code" data-act_name="Your-default-act-name">New Category</option>
  <!-- Provide default values here -->
  <!-- After giving values via PHP your HTML code should look like this-->
  <option value='Function Code 1' data-act_code='Activity Code 1' data-act_name='Activity Name 1'>Function Name 1</option>
  <option value='Function Code 2' data-act_code='Activity Code 2' data-act_name='Activity Name 2'>Function Name 2</option>
  <option value='Function Code 3' data-act_code='Activity Code 3' data-act_name='Activity Name 3'>Function Name 3</option>
</select>

Function Code: <input type="text" class="form-control" id="function_code" name="function_code" title="function_code" /><br>
Function Name: <input type="text" class="form-control" id="function_name" name="function_name" title="function_name" /><br>
Activity Code: <input type="text" class="form-control" id="activity_code" name="activity_code" title="activity_code" /><br>
Activity Name: <input type="text" class="form-control" id="activity_name" name="activity_name" title="activity_name" />