1

Quisiera saber como llenar un select con la opción seleccionada de otro select. Mi primer select obtiene los datos de un llave foránea, y lo que quiero es que se me cargue otro select con los datos de columna estado de tabla foránea.

 <div class="panel panel-default">

    <div class="panel-heading">
        <h3 class="panel-title">Nuevo Mantenimiento</h3>
    </div>

    <div class="panel-body">

        <div class="table-container">
            <form method="POST" action="{{ route('mantenimiento_imp.store') }}"  role="form">
                {{ csrf_field() }}

                <div >

                    <label for="impresora_id">ID Impresora:</label>
                    <select class="form-control input-sm" name="impresora_id" id="impresora_id">
                        <option disabled="true" selected="true">=== Select IMPRESORA===</option>
                        @foreach($impresora as $impresoras)
                        <option estado-imp="{{$impresoras->estado}}" modelo-imp="{{$impresoras->modelo_imp}}" marca-imp="{{$impresoras->marca_imp}}" value="{{$impresoras->id}}">{{$impresoras->nombre_imp}}</option>
                        @endforeach
                    </select>
                </div>
                <select id="estado_imp" name="estado">
                    <option>Debe escoger una empresa primero</option>
                </select>
                <div>
                    <label for="marca_equipo">Marca Equipo:</label>
                    <input type="text" name="marca_equipo" class="form-control input-sm" placeholder="Marca" id="marca_imp" />

                </div>
                <div>
                    <label for="modelo">Modelo:</label>
                    <input  class="form-control input-sm" type="text" placeholder="Modelo_imp" id="modelo_imp" />
                </div>
                <div>
                    <label for="motivo">Motivo:</label>
                    <textarea type="text" name="motivo" id="motivo" cols="50" rows="10" class="form-control input-sm" placeholder="Motivo" style="resize: none"></textarea>
                </div>
                <div>
                    <label for="diagnostico">Diagnostico:</label>
                    <textarea type="text" name="diagnostico" id="diagnostico" cols="50" rows="10" class="form-control input-sm" placeholder="Diagnostico" style="resize: none"></textarea>
                </div>
                <div>
                    <input type="hidden" name="fecha_mant" value=" <?php echo $fecha = date('d-m-Y'); ?> " >
                    <input type="submit"  value="Guardar" class="btn btn-success btn-block">
                    <a href="{{ route('mantenimiento_imp.index') }}" class="btn btn-info btn-block" >Atrás</a>

                </div>



                <script type="text/javascript">

impresora_id.addEventListener("change", () => {
let opt = impresora_id.options[impresora_id.selectedIndex];
let elmodelo = opt.getAttribute("modelo-imp");
modelo_imp.value = elmodelo;
let lamarca = opt.getAttribute("marca-imp");
marca_imp.value = lamarca;

let elestado = opt.getAttribute("estado-imp");
estado_imp.value = elestado;


})
                </script>

        </div>
    </div>

</div>

1
  • si son combos dependientes, necesitaras ajax para hacerlo en demanda, hay una forma de hacerlo sin ajax deberas guardar en javascript todas los datos y construir el select cada vez.
    – Sk.
    el 7 dic. 2018 a las 14:34

1 respuesta 1

1

Creo que podrías hacer algo asi:

  • Traes en una variable ($impresora te vale, por ejemplo), los datos que quieres insertar en un atributo de esa variable:

Código php:

$impresora :
    [0] :
        estado : ...
        modelo_imp : ...
        id : 5
        datos_estado : //aquí metes los datos del estado con id 5
        ...
    [1] :
        ...

En tu vista:

codigo js:

var impresora = [abre llaves php] print_r(json_encode($impresora)) [cierras llaves];
  • Creas un evento para que al seleccionar un option de tu primer select obtenga la opción seleccionada:

eventos/funciones:

$('#impresora_id').change(function(){
    var id = $(this).val();
    var datos = obtenerDatos(id);
    insertarDatos(datos);
});

function obtenerDatos(id){
    var indice = impresora.findIndex(x => x.id == id); //con esto obtienes el indice de "impresoras" cuyo valor es el seleccionado.
    var datos = impresora[indice].datos_estado;
    return datos;
}

function insertarDatos(datos){
    //aqui construyes los option con los datos que desees y los insertas en tu otro select. Sobre esta parte no te puedo ayudar mucho porque no se que datos traes/quieres mostrar, pero por ejemplo, si los datos asociados fuesen del estilo:
    // id_asociado, valor_asociado
    var n = datos.length;
    var options = '';
    for(var i=0;i<n;i++){
        var dato = datos[i];
        options += '<option value='+dato['id_asociado']+'>'+dato['valor_asociado']+'</option>';
    }
    $('#estado_imp').empty().append(options); //con empty vaciarás también el option sin value.
}

Mas o menos, la idea es esa. Prueba a ver y si te da problemas, nos dices.

NOTA: Ten en cuenta que los options se han añadido de forma dinámica de cara a los eventos que quieras "enlazar" sobre ellos, vale?

Espero haberte ayudado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.