Tengo un problema para mostrar los 4 datos diferentes en los campos de entrada. He creado la función onchange para obtener el valor 1 en el campo de entrada, pero cómo obtener otros datos diferentes para mostrar en los otros campos:

A continuación se muestra mi codificación:

<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>

Ahora mi salida me muestra los 4 mismos datos en los campos de entrada, como debajo de la imagen: Salida 1

En realidad, quiero mostrar los 4 datos diferentes, ahora solo tomo los primeros datos usando este código $ rs_incharge ['function_code'], cómo dejo que estos $ rs_incharge ['function_name'], $ rs_incharge ['activity_code'] $ rs_incharge [' nombre_actividad '] puede mostrar el campo diferente, espero que alguien pueda guiarme a resolver este problema. Gracias.

0
John Soon 4 may. 2020 a las 15:32

2 respuestas

Debe almacenar los datos en atributos adicionales en el <option> en sí mismo, luego obtener los valores onchange y luego realizar su operación. Esto debería ayudarte.

<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
    <option selected readonly>Please Select</option> <!--Make this selected by default(If readonly doesn't work, try disabled)-->
    <option value="New Category_value" data-act_code="Your-default-value" data-act_name="Your-default-value">New Category</option> <!-- Provide default values here -->

    <?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>

Luego en tu script

<script>

function getComboA(selectObject) {

    let func_code = selectObject.value;  // get the value of selected option
    let func_name = selectObject.textContent;  // get the text of selected option
    let act_code  = selectObject.getAttribute("data-act_code");  // get attribute of selected option
    let act_name  = selectObject.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>
0
sauhardnc 4 may. 2020 a las 13:25

Bienvenido a Stackoverflow. ¿Podría proporcionar un ejemplo de trabajo mínimo? No puedo ejecutar el programa en mi host local porque no tengo acceso a su base de datos. Intente extraer el problema real, por ejemplo, proporcionando un resultado de muestra de la base de datos como matriz constante en lugar de realizar una consulta db.

Aparte de eso, parece que la función de JavaScript getComboA () podría ser el problema, ya que establece el mismo valor en todos los cuadros de texto.

0
Matthias Heinlein 4 may. 2020 a las 12:58