I'm doing something that multiselect
automatically fills in the data from the database with a request ajax
. What I do is that I php
return the structure html
and jquery
send it to html
, but when I try to fill it out, it doesn't work. can you help, I appreciate it.
PHP
if($empleados != null){
$html = "<li id='0' data='0'>Seleccionar empleado</li>";
$cantidad = 0;
if($registros != null){
if(count($empleados) > count($registros) ){
$cantidad = count($empleados);
}else{
$cantidad = count($registros);
}
for ($i=0, $j= 0; $i < $cantidad; $i++) {
if(isset($emp)){
if($empleados[$i]["id_empleado"] == $emp){
$html .= "<li id='{$empleados[$i]['id_empleado']}' data='{$empleados[$i]['id_empleado']} selected>{$empleados[$i]['nombres']} {$empleados[$i]['apellidos']}</li>";
$j++;
$i++;
}
}
if($empleados[$i]["id_empleado"] == $registros[$j]['id_empleado']){
$j++;
}else{
$html .= "<li id='{$empleados[$i]['id_empleado']}' data='{$empleados[$i]['id_empleado']}>{$empleados[$i]['nombres']} {$empleados[$i]['apellidos']}</li>";
}
}
}else{
for ($i=0; $i < count($empleados); $i++) {
$html .= "<li id='{$empleados[$i]['id_empleado']}' data='{$empleados[$i]['id_empleado']}'>{$empleados[$i]['nombres']} {$empleados[$i]['apellidos']}</li>";
}
}
echo $html;
}else{
echo "<li id='0' data='0'>No hay empleados</li>";
}
Look more at the chains since everything I do there is so that there are no certain problems when filling it
JQuery
function llenarEmpleados(){
var sede = $("#sede").val();
var fecha = $("#fecha").val();
var parametros = {
'sede' : sede,
'fecha' : fecha
};
if(sede != 0 && fecha != ""){
$.ajax({
data: parametros,
url: '/Jomar/users_control/controller/ControlAsisController.php?action=llenarEmpleados',
type: 'post',
success: function (response){
console.log(response);
$("multiselect ul").html(response);
$("#empleado").attr("disabled", false);
}
});
}else{
var html = "<option value'0'>Seleccionar empleado</option>"
$("#empleado").attr("disabled", "disabled");
$("#empleado").html(html);
}
}
HTML
<select type="text" size="5" class="custom-select" id="empleado" name="empleado" multiple>
<option value="0" disable selected>Seleccionar empleado</option>
</select>
Multiselect jquery
$(function () {
$('#empleado').multiselect({
buttonText: function(options, select) {
console.log(select[0].length);
if (options.length === 0) {
return 'Sin Seleccion';
}
if (options.length === select[0].length) {
return 'Todos ('+select[0].length+')';
}
else if (options.length >= 4) {
return options.length + ' Seleccionados';
}
else {
var labels = [];
console.log(options);
options.each(function() {
labels.push($(this).val());
});
return labels.join(', ') + '';
}
}
});
});
One of the values it returns would be:
<li id='0' data='0'>Seleccionar empleado</li><li id='01' data='01'>Manuel Chará</li><li id='26' data='26'>Gabriel Caballero Bedoya</li><li id='35' data='35'>Karen Lizeth Torres</li><li id='39' data='39'>Juan Manuel Astudillo</li><li id='40' data='40'>Karen Sofia Garcia</li><li id='42' data='42'>Dylan Restrepo Calvache</li><li id='45' data='45'>Anderson Ruiz</li><li id='48' data='48'>Juan Felipe Bonilla</li>
I solved the problem at the time of filling it in
jquery
, I sent it to say that after inserting it to rebuild the multiselect and thus load the new data. It's done this wayPHP
returning theoption
Thanks to @Ricardo Pérez for his help!