0

Hola lo que quiero hacer es agregarle el checkbox a cada fila de mi lista en mi php que se llama filtro tengo esto

elseif($fproduct2){ ?>
    <!-- ++++++++++++ PRODUCT ++++++++++++ -->
    <div class="col-md-2">

    <label>Producto:</label>
    <select name="product02" id="product02" multiple>
    </select>
    </div>
    <?
        $col = $col + 2;
        $jsvars .= 'var product = $("#product02").val();
        ';
        if($fcount!==1) $params .= ',';
        $params .= 'product';
        $fproduct2 = false;
}

y en el archivo donde lo llamo que se llama reporte.php tengo esto

var getData = function () {
    getCategoryData()
    getProductData()
    $("#category02").select2({});
    $("#product02").select2({});
    $("#tipoReporte").select2({});
    $('#product02').multiSelect();
}

intente como pueden ver agregarle a la etiqueta el multiselect y llamarlo en una funcion con jquery pero no lo logro, quiero que se vea como en la siguiente imagen:

introducir la descripción de la imagen aquí

1 respuesta 1

1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery-multi-select</title>

<!--Librerias usadas -->

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://gitcdn.link/repo/mysociety/jquery-multi-select/master/src/jquery.multi-select.js"></script>

   
</head>
<body>

<!--Diseñe el complemento en el CSS de la siguiente manera:-->
<style>
.multi-select-container {
display: inline-block;
position: relative;
}

.multi-select-menu {
position: absolute;
left: 0;
top: 0.8em;
z-index: 1;
float: left;
min-width: 100%;
background: #fff;
margin: 1em 0;
border: 1px solid #aaa;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: none;
}

.multi-select-menuitem {
display: block;
font-size: 0.875em;
padding: 0.6em 1em 0.6em 30px;
white-space: nowrap;
}

.multi-select-menuitem + .multi-select-menuitem {
padding-top: 0;
}

.multi-select-presets {
border-bottom: 1px solid #ddd;
}

.multi-select-menuitem input {
position: absolute;
margin-top: 0.25em;
margin-left: -20px;
}

.multi-select-button {
display: inline-block;
font-size: 0.875em;
padding: 0.2em 0.6em;
max-width: 16em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: -0.5em;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
cursor: default;
}

.multi-select-button:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0.4em 0.4em 0 0.4em;
border-color: #999 transparent transparent transparent;
margin-left: 0.4em;
vertical-align: 0.1em;
}

.multi-select-container--open .multi-select-menu {
display: block;
}

.multi-select-container--open .multi-select-button:after {
border-width: 0 0.4em 0.4em 0.4em;
border-color: transparent transparent #999 transparent;
}

.multi-select-container--positioned .multi-select-menu {
/* Evita el borde / el relleno en el menú de desorden con el cálculo de ancho de JavaScript */
box-sizing: border-box;
}

.multi-select-container--positioned .multi-select-menu label {
/* Permite que las etiquetas se ajusten a la línea cuando el menú está estrechado artificialmente */
white-space: normal;
}
</style>

<form class="formu">
    <label for="productos">Producto:</label>

<!-- Construye tu selección: -->
    <select id="productos" name="categories" multiple>
        <option value="a">Chimichurri</option>
        <option value="b">Arrocera</option>
        <option value="c">Albondigas</option>
        <option value="d">Barbacoa</option>
    </select>
</form>

<script type="text/javascript">
$(function(){
    $('#productos').multiSelect({
        noneText: 'Seleccione..',
        presets: [
            {
                name: 'Seleccionar todos',
                options: ['a', 'b', 'c', 'd']
            }
        ]
    });
});

</script>

</body>
</html>

Esto es una plantilla que podrias usar, contiene un complemento de jQuery que convierte el cuadro de selección múltiple en una lista desplegable fácil de usar con casillas de verificación para simplificar la selección de múltiples opciones.

Tu Respuesta

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

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