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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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