Pass data to select in modal


Again I come to your knowledge,

I have a table which is filled with data from mysql, each row has a button that displays a modal window which carries the data of the row on which the button was clicked. Inside the modal window I have a select element which I need to load as a value one of the data of the selected row, but it does not work.

This is my modal window

<div class="modal fade mt-4" id="cliente-modal" tabindex="-1" role="dialog" aria-labelledby="cliente-modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Modificar Cliente</h6>
                <button class="close" data-dismiss="modal" aria-label="Cerrar">
                    <span aria-hidden="true">&times;</span>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <form action="" method="post" class="form-group">
                                <div><input type="text" id="identidad" name="identidad" class="data" readonly></div>
                                    <label for="">Nombre</label></div>
                                <div><input type="text" id="nombre" name="nombre" class="data" disabled></div>
                                    <label for="">Correo</label></div>
                                    <div><input type="text" id="correo" name="correo" class="form-control"></div>
                                <label for="producto">Producto</label>
                                <select class="custom-select" name="id_producto" id="id_producto" required>
                                    <option value=""></option>

                                                        foreach($matriz_producto as $producto){
                                                        echo "<option value='".$producto["id_producto"]."'>".$producto["descripcion"] ."</option>" ;

                                <div class="modal-footer">
                                    <input type=submit value="Guardar" id="guardar" name="guardar" class="mt-4 btn btn-primary btn-sm btn-guardar"></div>


With this function I pass the data to the modal

$(document).ready(function () {
    $(document).on('click', '.cliente-modal', function () {
        var id = $(this).val();
        var nombre = $('#nombre' + id).text();
        var identidad = $('#identidad' + id).text();
        var correo = $('#correo' + id).text();
        var producto = $('#id_producto' + id).text();


This fills the table that passes the data to the modal

<blink>    <table class="table table-striped tablesorter" id="tabla">
                    <?php foreach($consultaClientes as $datos): ?>
                        <td><span id="nombre<?php echo $datos->getCodigo(); ?>"><?php echo $datos->getNombre() ?></span></td>
                        <td><span id="identidad<?php echo $datos->getCodigo(); ?>"><?php echo $datos->getIdentidad() ?></span></td>
                        <td><span id="id_producto<?php echo $datos->getCodigo(); ?>"><?php echo $datos->getProducto() ?></span></td>
                        <td><button type="button" class="btn btn-primary btn-sm cliente-modal" data-toggle="modal" data-target="#cliente-modal" value="<?php echo $datos->getCodigo(); ?>"><span>Modificar</span></button></td>
                        <td style="display:none;"><span id="correo<?php echo $datos->getCodigo(); ?>"><?php echo $datos->getCorreo() ?></span></td>
                </table>    </blink>

Thank you in advance for your help

asked by car-onte 08.11.2018 в 15:51

1 answer


Your problem is in this line:

var producto = $('#id_producto' + id).text();

You are selecting the text of the selection and then you try to find the value with that text, but that value does not exist. The correct way would be like this:

var producto = $('#id_producto' + id).val();
answered by 08.11.2018 в 17:22