0
<body>
  <div id="contenedor">
    <br/><br/>
    <label>DNI</label>
    <input type="text" id="dni"> 

    <br/><br/>
    <label>NOMBRE</label>
    <input type="text" id="nombre"> 

    <br/><br/>
    <label>APELLIDO</label>
    <input type="text" id="apellido"> 

    <br/><br/>
    <label>CELULAR</label>
    <input type="text" id="numero"><br/>
    <br/><br/>

    <select class="test" id="tecnologia" name="tecnologia[]" multiple="multiple">
       <option>2G</option> 
       <option>3G</option> 
       <option>4G</option> 
       <option>TDD</option>
   </select>
      </br></br>

    <br/><br/>
    <button onclick="anadir();">Añadir</button>
    <input type="submit" onclick="anadir()" value="anadir">
    <input type="submit" onclick="modificar()" value="modificar">
    <input type="submit" onclick="eliminar()" value="eliminar">
    <input type="submit" onclick="buscar()" value="buscar">
  </div>
</body>

introducir la descripción de la imagen aquí

me muestra de esa manera, pero lo que deseo es que me muestre el Select Multiple pero con diseño, osea que cada opcion presente a su lado izquierdo un cuadro para dar check, lo que es el AJAX Y JSON ya realize el codigo, pero el interfaz de el select multiple debe ser distinto, osea que si por ejemplo tenga una lista de 1000 datos,se habra mediante una menu desplegable

4
  • Puedes hacerlo con un plugin, por ejemplo Select2
    – alanfcm
    el 24 abr. 2018 a las 21:15
  • ¿Has hecho la misma pregunta varias veces?
    – Alvaro Montoro
    el 25 abr. 2018 a las 3:02
  • @alanfcm he intentado hacerlo con un plugin, y el diseño sale muy bueno, pero el problemas es que cuando llamo valores con el JSON no me muestra en el select multiple... osea no me salen los check marcados
    – kev
    el 26 abr. 2018 a las 15:02
  • Podrias hacer otra pregunta para ese problema. Chequea la documentacion para ver como le das valor a un Select2
    – alanfcm
    el 26 abr. 2018 a las 15:30

2 respuestas 2

0

Podrias usar algo de Jquery

HTML

<body>
    <select size="5" name="lstStates" multiple="multiple" id="lstStates">
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="OH">Ohio</option>
        <option value="TX">Texas</option>
        <option value="PA">Pennsylvania</option>
    </select>   
</body>

DONDE DETERMINAS LA ACCION

$(function () { 
    $('#lstStates').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(', ') + '';
            }
        }

    });


});

EJEMPLO REALIZADO

7
  • esa funcion lo creaste con un script en el mismo cuerpo del html?
    – kev
    el 26 abr. 2018 a las 14:35
  • puedes usar de las dos formas, es decir incluido en el html o con un script externo eso dependera de ti, igual va a funcionar el 26 abr. 2018 a las 15:33
  • lo estuve haciendo de esa manera pero no me resulta, estoy haciendo en el mismo html, estoy incluyendo un <script> despues del </select> pero no varia,el select multiple sigue mostrandose igual como en la imagen... o es que falta añadir algo en el head?
    – kev
    el 26 abr. 2018 a las 15:38
  • 1
    he añadido bootstrap, y multiselect y corre muy bien en mi codigo, pero no me muestra los valores que recojo de mi base de datos, ya que el js solo muestra valores que se seleccionan con el mouse... formulare otra pregunta para que se entienda
    – kev
    el 26 abr. 2018 a las 16:25
  • en tu codigo he visto que usas estas librerias jquery-1.11.3.min.js bootstrap.min.css bootstrap.min.js bootstrap-multiselect.css bootstrap-multiselect.js pero hay alguna manera que no trabaje con alguna de ellas?
    – kev
    el 3 may. 2018 a las 14:53
0

otra manera mas facil de crear el selectmultiple es implementando la librería select2 te dejare el enlace de la librería para que veas como funciona select2

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.