Código de JavaScript - Añadir o eliminar selects segun el usuario va seleccionando

Imágen de perfil
Val: 2.023
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Añadir o eliminar selects segun el usuario va seleccionandográfica de visualizaciones


JavaScript

Publicado el 21 de Junio del 2018 por Xavi (534 códigos)
1.655 visualizaciones desde el 21 de Junio del 2018
Este código muestra como se pueden clonar y eliminar elementos de una pagina. En este ejemplo, se va clonando el select de países mientras el usuario seleccione.

paises-por-seleccionar

paises-seleccionados


Los datos se obtienen desde PHP, Java, Python, ... en un array de valores, devolviendo algo como:
1
[paises] => Array ( [0] => 4 [1] => 5 [2] => 1 [3] => 3 [4] => 0 )

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 24 de Junio del 2018 (Publicado el 21 de Junio del 2018)gráfica de visualizaciones de la versión: Versión 1
142 visualizaciones desde el 21 de Junio del 2018

Versión 2 - utilizando una clase de javascript
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 21 de Junio del 2018gráfica de visualizaciones de la versión: Versión 2 - utilizando una clase de javascript
1.514 visualizaciones desde el 21 de Junio del 2018
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<style>
	select, input {
        display:block;
        margin:5px;
        width:200px;
    }
	</style>
</head>
 
<body>
 
<h2>Selecciona los países de América del sur que mas te gustan</h2>
 
<form method="POST">
    <div>
        <select name="paises[]">
            <option value="0">Selecciona un país</option>
            <option value="1">Argentina</option>
            <option value="2">Bolivia</option>
            <option value="3">Brasil</option>
            <option value="4">Chile</option>
            <option value="5">Colombia</option>
            <option value="6">Ecuador</option>
            <option value="7">Guyana</option>
            <option value="8">Paraguay</option>
            <option value="9">Perú</option>
            <option value="10">Surinam</option>
            <option value="11">Uruguay</option>
            <option value="12">Venezuela</option>
        </select>
    </div>
    <input type="submit" value="Enviar">
</form>
 
<script>
var Paises=function() {
    var that=this;
    /**
     * Funcion que se ejecuta cada vez que se selecciona un pais
     */
    this.paisSeleccionado=function() {
        var div=this.closest("div");
        // comprovamos si ha seleccionado un pais
        if(this.value>0) {
            that.addSelect(div,this);
        }else{
            that.removeSelect(div);
        }
    }
 
    /**
     * funcion para añadir un nuevo select con los paises
     * @param div elemento que contiene
     * @param select select en el que se ha seleccionado el pais
     */
    this.addSelect=function(div,select) {
        var selects=div.querySelectorAll("select");
 
        // comprobamos que el ultimo select este seleccionado para añadir uno nuevo
        if(selects[selects.length-1].value!=0) {
 
            // clonamos el actual select
            var clone=select.cloneNode(true);
 
            // le añadimos el evento change
            clone.addEventListener("change",that.paisSeleccionado);
 
            // lo añadimos al código HTML al final de la lista de paises
            div.appendChild(clone);
        }
    }
 
    /**
     * funcion para eliminar los select necesarios para que solo quede el ultimo
     * por seleccionar un pais
     * @param div elemento que contiene
     */
    this.removeSelect=function(div) {
        var selects=div.querySelectorAll("select");
 
        // si solo hay un elemento, salimos, ya que no podemos eliminar el elemento inicial
        if(selects.length==1) {
            return;
        }
 
        // si los dos ultimos elementos no tienen seleccion, eliminamos el ultimo
        if(selects[selects.length-1].value==0 && selects[selects.length-2].value==0) {
            selects[selects.length-1].remove();
            that.removeSelect(div);
        }
    }
 
    // añadimos el evento change al primer select de paises
    document.querySelector("select[name='paises[]']").addEventListener("change",that.paisSeleccionado);
}
var pais=new Paises();
</script>
 
</body>
</html>



Comentarios sobre la versión: Versión 2 - utilizando una clase de javascript (1)

Imágen de perfil
25 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
excelente
Responder

Comentar la versión: Versión 2 - utilizando una clase de javascript

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4668