Código de JQuery - Seleccionar y de-seleccionar todos los elementos de un select

Imágen de perfil

Seleccionar y de-seleccionar todos los elementos de un selectgráfica de visualizaciones


JQuery

Publicado el 22 de Enero del 2015 por xve
1.969 visualizaciones desde el 22 de Enero del 2015. Una media de 21 por semana
En este ejemplo, muestro como pulsando un botón, se pueden seleccionar o de-seleccionar todos los <option> de un <select>

Versión 1.0

Publicado el 22 de Enero del 2015gráfica de visualizaciones de la versión: Versión 1.0
1.970 visualizaciones desde el 22 de Enero del 2015. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
 
    <style>
    select,input {width:150px;}
    </style>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
 
    <script>
    /**
     * Función que selecciona todos los valores del select
     * Recibe el id del select al que tiene que hacer referencia
     */
    function seleccionarTodo(id)
    {
        // Recorremos todos los valores
        $("#"+id+" option").each(function(){
 
            // Marcamos cada valor como seleccionado
            $("#"+id+" option[value="+this.value+"]").prop("selected",true);
        });
    }
 
    /**
     * Funcion que elimina la seleccion de cualquier elemento del select
     * Recibe el id del select al que tiene que hacer referencia
     */
    function eliminarSeleccion(id)
    {
        // Recorremos todos los valores
        $("#"+id+" option").each(function(){
 
            // Marcamos cada valor como NO seleccionado
            $("#"+id+" option[value="+this.value+"]").prop("selected",false);
        });
    }
    </script>
 
</head>
<body>
 
<form>
    <select name="miSelec" id="miSelect" multiple="multiple">
        <option value="1">primero</option>
        <option value="2">segundo</option>
        <option value="3">tercero</option>
        <option value="4">quarto</option>
    </select>
 
    <br><input type="button" value="seleccionar todo" onclick="seleccionarTodo('miSelect')">
    <br><input type="button" value="eliminar seleccion" onclick="eliminarSeleccion('miSelect')">
</form>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (0)


No hay comentarios
 

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3012