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

Imágen de perfil
Val: 1.999
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.687 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
146 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
<!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>
// añadimos el evento change al primer select de paises
document.querySelector("select[name='paises[]']").addEventListener("change",paisSeleccionado);
 
/**
 * Funcion que se ejecuta cada vez que se selecciona un pais
 */
function paisSeleccionado() {
    var div=this.closest("div");
 
    // comprovamos si ha seleccionado un pais
    if(this.value>0) {
        addSelect(div,this);
    }else{
        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
 */
function addSelect(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",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
 */
function removeSelect(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();
        removeSelect(div);
    }
}
</script>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (1)

Imágen de perfil
21 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1

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

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.542 visualizaciones desde el 21 de Junio del 2018
http://lwp-l.com/s4668