Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Desplegar subcategorias dependiendo categoria

JavaScript - Desplegar subcategorias dependiendo categoria

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Desplegar subcategorias dependiendo categoria

Publicado por Kevin (6 intervenciones) el 01/10/2016 02:11:51
Buenas tardes amigos,

No tengo realmente casi nada de conocimientos de JavaScript, me encuentro con un inconveniente, tengo un formulario con una categoría y subcategoria, dicha subcategoria mostrara datos dependiendo de la categoría, pero no se como hacer eso con javascript o si hay alguna otra forma, podría ayudarme alguien dándome quizás unas pistas en lo que tengo que hacer... dejo acá un ejemplo de lo que me gustaría hacer.

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
<select name="Categoria1">
   <option selected value="0"> Elige una opción </option>
       <option value="1">Abarrotes</option>
       <option value="2">Electrónicos</option>
       <option value="3">Línea blanca</option>
   </optgroup>
</select>
 
<!-- Si son abarrotes mostrar esta lista -->
<select name="Abarrortes">
   <option selected value="0"> Elige una opción </option>
       <option value="1">Cuidado personal</option>
       <option value="2">Cocina</option>
   </optgroup>
</select>
<!-- Si son electronicos mostrar esta lista -->
<select name="Electronicos">
   <option selected value="0"> Elige una opción </option>
       <option value="1">TV y video</option>
       <option value="2">Celulares</option>
   </optgroup>
</select>
<!-- Si es linea blanca mostrar esta lista -->
<select name="Linea blanca">
   <option selected value="0"> Elige una opción </option>
       <option value="1">Estufa</option>
       <option value="2">Lavadora</option>
       <option value="3">Secadora</option>
   </optgroup>
</select>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 183
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Desplegar subcategorias dependiendo categoria

Publicado por Yamil Bracho (78 intervenciones) el 01/10/2016 03:05:37
Prueba con esto
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
<!DOCTYPE html>
 
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <form>
            <select name="Categoria1" id='cboCategoria' onChange="Categoria1_onChange()">
                <option selected value="0"> Elige una opción </option>
                <option value="1">Abarrotes</option>
                <option value="2">Electrónicos</option>
                <option value="3">Línea blanca</option>
            </select>
 
 
            <!-- Si son abarrotes mostrar esta lista -->
            <select name="Abarrortes" id="Abarrortes">
                <option selected value="0"> Elige una opción </option>
                <option value="1">Cuidado personal</option>
                <option value="2">Cocina</option>
            </select>
 
 
            <!-- Si son electronicos mostrar esta lista -->
            <select name="Electronicos" id="Electronicos">
                <option selected value="0"> Elige una opción </option>
                <option value="1">TV y video</option>
                <option value="2">Celulares</option>
            </select>
 
            <!-- Si es linea blanca mostrar esta lista -->
            <select name="Linea blanca" id="LineaBlanca">
                <option selected value="0"> Elige una opción </option>
                <option value="1">Estufa</option>
                <option value="2">Lavadora</option>
                <option value="3">Secadora</option>
            </select>
 
        </form>
        <script>
            var cboCategoria = document.getElementById("cboCategoria");
            var cboAbarrortes = document.getElementById('Abarrortes');
            var cboElectronicos = document.getElementById('Electronicos');
            var cboLineaBlanca = document.getElementById('LineaBlanca');
            hideCombos();
 
            function Categoria1_onChange() {
                var value = parseInt( cboCategoria.options[cboCategoria.selectedIndex].value);
                hideCombos();
 
                switch (value) {
                    case 1 :
                        show(cboAbarrortes);
                        break;
                    case 2 :
                        show(cboElectronicos);
                        break;
                    case 3 :
                        show(cboLineaBlanca);
                        break;
                    default :
                        break;
 
                }
 
            }
 
            function hideCombos() {
                hide(cboAbarrortes);
                hide(cboElectronicos);
                hide(cboLineaBlanca);
 
            }
 
            function hide(elem) {
                elem.style.display = 'none';
            }
 
            function show(elem) {
                elem.style.display = 'inline';
            }
 
 
        </script>
    </body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Desplegar subcategorias dependiendo categoria

Publicado por Kevin (6 intervenciones) el 01/10/2016 03:14:12
Hola gracias, lo acabo de probar esta mucho mejor que lo que logre hacer te lo agradezco!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Desplegar subcategorias dependiendo categoria

Publicado por Kevin (6 intervenciones) el 01/10/2016 03:06:30
Hola nuevamente, ya lo resolvi creo que talvez no de la mejor manera pero puede que les ayude.

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
<form>
<select name="Categoria1" id="Categoria1" onchange="mostrar()">
   <option selected value="0"> Elige una opción </option>
       <option value="Abarrotes">Abarrotes</option>
       <option value="Electrónicos">Electrónicos</option>
       <option value="Línea blanca">Línea blanca</option>
   </optgroup>
</select>
<select name="Abarrortes" id="Abarrotes" style='display:none;'>
   <option selected value="0"> Elige una opción </option>
       <option value="1">Cuidado personal</option>
       <option value="2">Cocina</option>
   </optgroup>
</select>
<select name="Electronicos" id="Electrónicos" style='display:none;'>
   <option selected value="0"> Elige una opción </option>
       <option value="1">TV y video</option>
       <option value="2">Celulares</option>
   </optgroup>
</select>
<select name="Linea blanca" id="Línea blanca" style='display:none;'>
   <option selected value="0"> Elige una opción </option>
       <option value="1">Estufa</option>
       <option value="2">Lavadora</option>
       <option value="3">Secadora</option>
   </optgroup>
</select>
 
</form>
 
<script type="text/javascript">
function mostrar(){
valor = document.getElementById("Categoria1").value;
var x = document.getElementsByTagName("SELECT");
var i;
for (i = 0; i < x.length; i++) {
 
    x[i].style.display = 'none';
}
document.getElementById('Categoria1').style.display = 'block';
document.getElementById(valor).style.display = 'block';}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Desplegar subcategorias dependiendo categoria

Publicado por frank (1 intervención) el 04/09/2018 23:37:22
y a esta categoria se le puede agregar una sub categoria mas? osea al seleccionar lavadora se desplegue otra categoria? ayuda porfa
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar