我正在使用 Laravel 5.8,我有一个表单,其中我有多个 select2,我试图用用户想要编辑的数据加载 select2,我需要的是用户的类在所说的select2中选择了已经注册的。
这是我的选择2
<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>
这是我获取用户数据的控制器
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);
}
当我单击编辑(在我的数据表中)时,它会使用用户数据加载表单,我还尝试以不同的方式加载 select2,如下所示
$('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
});
})
});
为了更清楚,想法是在编辑时,用户显示他已经在 select2 中注册为“已选择”的许可证,如下图所示(此用户已注册 2/3 许可证,数据为 false 只是在案子)
我希望我能很好地解释自己,在此先感谢。解决方案:采取选项 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');
});
并且在模态之外取消或单击时,请执行以下操作
$("#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
});
对我来说,最好的答案是在我们已经预加载用户时创建一个回调函数来执行代码,我通过加载一个随机数组来做到这一点,然后在我的回调函数中我让它们选择,使用方法来选择对象它放在select2 文档中。有几种方法,但看起来很简单,您可能正在从不同的来源或数据库加载选项和用户选择的选项,但在这种情况下,我从 API 下载的相同的是我选择的,这是一个问题的想象力。
在这里我给你留下一个功能性的例子,希望对你有帮助,问候。
这是两个老师的示例,您只需在获取新用户时清除/重置输入: