estoy trabajando con laravel 5.8, tengo un formulario en el cual tengo un select2 multiple, el cual estoy intentando cargar el select2 con los datos que tiene el usuario al cual quiero editar, lo que necesito es que las clases que ya tiene registradas el usuario estén seleccionadas en dicho select2.
este es mi select2
<div class="select2-blue">
<select class="select2" name="licencias[]" id="licencias" multiple="multiple" data-placeholder="Seleccione licencia/s" data-dropdown-css-class="select2-blue" style="width: 100%;">
</select>
</div>
Este es mi controlador en el cual obtengo los datos del usuario
public function edit($id)
{
$profesor = profesorModel::find($id);
$licencias = array();
foreach($profesor->licencias as $licencia){
$licencias[] = array(
"id"=>$licencia->id_licencia,
"text"=>$licencia->clase
);
}
$profesor['licencias'] = $licencias;
return response()->json($profesor);
}
al momento de darle click en editar (en mi datatable) este me carga el formulario con los datos del usuario, en el cual también he intentado cargar el select2 de diferentes formas, como se muestra a continuación
$('body').on('click', '.editarProfesor', function () { // Boton editar Datatable
var id_profesor = $(this).data('id');
$.get("{{ route('profesor.index') }}" +'/' + id_profesor +'/edit', function (data) {
$('#header-modal').html("Editar profesor");
$('#btnCrear').val("Guardar cambios");
$('#modal-profesor').modal('show');
$('#id_profesor').val(data.id_profesor);
$('#rut').val(data.rut);
$('#nombre').val(data.nombre);
$('#apellidos').val(data.apellidos);
$('#correo').val(data.correo);
$('#clave').val(data.clave);
$('#telefono').val(data.telefono);
$('#direccion').val(data.direccion);
$('#fecha_nacimiento').val(data.fecha_nacimiento);
if(data.curriculum.length > 0) // Verifica si profesor tiene este documento
{
$('#actualizar-curriculum').removeAttr('hidden'); //activa input
$('#fila-curriculum').attr('hidden', "hidden"); //oculta input
$('#nombre-curriculum-pdf').val(data.curriculum); //muestra el nombre del pdf en el input
}
if(data.contrato.length > 0) // Verifica si profesor tiene este documento
{
$('#actualizar-contrato').removeAttr('hidden'); //activa input
$('#fila-contrato').attr('hidden', "hidden"); //oculta input
$('#nombre-contrato-pdf').val(data.contrato); //muestra el nombre del pdf en el input
}
var licencias = data.licencias;
licencias.forEach(function(element) {
// OPCION 1 -------------------------
var selectLicencias = $('#licencias').select2();
var option = new Option(element.clase, element.id_licencia, true, true); //FUNCIONA PERO CADA VEZ QUE ELIJO UN PROFESOR, ME SUMA SUS CLASES AL SELECT
selectLicencias.append(option).trigger('change');
selectLicencias.trigger({
type: 'select2:select',
params: {
data: element
}
});
// OPCION 2 -------------------------
var data1 = [
{
id: element.id_licencia,
text: element.clase
}
];
var data2 =
{
id: element.id_licencia,
text: element.clase
}
;
var data3 = [
id=> element.id_licencia,
text=> element.clase
];
console.log(data1);
console.log(data2);
console.log(data3);
$('#licencias_select').val(data1).trigger("change"); // NO FUNCIONA
$('#licencias_select').val(data2).trigger("change"); // NO FUNCIONA
$('#licencias_select').val(data3).trigger("change"); // NO FUNCIONA
// OPCION 3 -------------------------
var id = element.id_licencia;
var clase = element.clase;
var $licencia_seleccionadas = $("<option selected></option>").val(id).text(clase);
$('#licencias').append($licencia_seleccionadas).trigger('change'); // FUNCIONA, PERO AL SELECCIONAR UNA LICENCIA QUE ESTE CARGADA POR ESTE METODO, SE SELECCIONA 2 VECES O MAS (FUNCIONA MAL)
// OPCION 4 -------------------------
$('#licencias') // FUNCIONA Y NO DEJA SELECCIONAR LA LICENCIA QUE YA ESTA SELECCIONADA (LO QUE NO HACE EL METODO DE ARRIBA), PERO SOLO MUESTRA 1 LICENCIA (AUN QUE ESTE TENGA MAS DE 1 REGISTRADA)
.empty() // limpio el select
.append($("<option/>") // agrego el tag option
.val(element.id_licencia) // cargo valor del id
.text(element.clase)) // cargo el texto a mostrar
.val(element.id_licencia) // selecciona el id en la lista del box
.trigger("change"); // aplica los cambios al select
});
})
});
para que quede mas claro, la idea esque al momento de darle a editar, el usuario aparezca con las licencias que el ya tiene registradas en el select2 como "selected", como la siguiente imagen (este usuario tiene registrado 2/3 licencias y los datos son falsos por si acaso)
Espero haberme explicado bien, gracias de antemano. SOLUCION: Ocupe la opcion 3
var licencias = data.licencias;
licencias.forEach(function(element) {
var id = element.id_licencia;
var clase = element.clase;
var $licencia_seleccionadas = $("<option selected></option>").val(id).text(clase);
$('#licencias').append($licencia_seleccionadas).trigger('change');
});
y al momento de cancelar o dar click fuera del modal, hiciera lo siguiente
$("#btnCerrar").on("click",function(event){
$('#licencias').val(null).trigger("change");
$('#licencias').empty();
});
$('#modal').on('hidden.bs.modal', function () {
$('#licencias').val(null).trigger("change"); // deja el select en null
$('#licencias').empty(); // limpia el input
});