Ayuda: Cambiar de valor al elegir un select

JamesPierre Siguiendo

Épsilon
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
22 Oct 2012
Mensajes
873
Hola Betas, un cliente me ha pedido lo siguiente y sinceramente estoy cero Js, me ha pedido lo siguiente.

Tipo una cotización virtual (algo así) que al elegir un valor de un select, me salga otro select con 2 valores, y al elegir uno de estos 2 valores me salga otro select con 2 valores más y al final mostrar el resultado de lo seleccionado. Se podría hacer este tipo de cosas?

He buscado en sam google, pero no hay exactamente lo que necesito.

Les agradeceré si me dan una mano Betas. Un abrazo :)
 

ridemant

Curioso
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
29 Feb 2016
Mensajes
10
HTML:
<select id="selectPrimario"><option value="0">Seleccione</option></select>
<select id="selectSecundario" disabled><option value="0">Seleccione</option></select>
<select id="selectTerciario" disabled><option value="0">Seleccione</option></select>

<script type="text/javascript">
var vector = [

		["Primario A" , [ 
					["Seleccione A", [] ],
					["Secundario A1", ["Seleccione A1", "Terciario (A1) - 1" , "Terciario (A1) - 2"]], 
					["Secundario A2", ["Seleccione A2", "Terciario (A2) - 1" , "Terciario (A2) - 2"]] 
				] 
		],
		["Primario B" , [ 
					["Seleccione B", [] ],
					["Secundario B1", ["Seleccione B1", "Terciario (B1) - 1" , "Terciario (B1) - 2"]], 
					["Secundario B2", ["Seleccione B2", "Terciario (B2) - 1" , "Terciario (B2) - 2"]] 
			        ] 
		],
		["Primario C" , [ 
					["Seleccione C", [] ],
					["Secundario C1", ["Seleccione C1", "Terciario (C1) - 1" , "Terciario (C1) - 2"]], 
					["Secundario C2", ["Seleccione C2", "Terciario (C2) - 1" , "Terciario (C2) - 2"]] 
			        ] 
		]
		
	];
			
var listando = function(el, v, m){
					el.disabled = false;
					while (el.firstChild)el.removeChild(el.firstChild);
					if(v.length > 0){
						for(var i in v) {
							var i = Number(i), opcion = document.createElement("option");
							opcion.text = m ? v[i][0] : v[i];
							opcion.value = i;
							el.add(opcion);
						}
					} else {
							var opcion = document.createElement("option");
							if(m) {var l = document.getElementById("selectTerciario"); l.disabled = true; l.selectedIndex = 0; }
							el.disabled = true;
							opcion.text = 'Seleccione';
							opcion.value = 0;
							el.add(opcion);
					}
					
		}

var p = document.getElementById("selectPrimario");	

	p.addEventListener('change',function(){	
			var s = document.getElementById("selectSecundario");
			if(!s.classList.contains('s')){
				s.addEventListener('change',function(){
					var t = document.getElementById("selectTerciario");
					listando(t , vector[Number(p.value)-1][1][Number(s.value)][1], !1);
					if(!t.classList.contains('t')){
						t.addEventListener('change',function(){
						
							alert(
							'Select 1: text=' + p.options[p.selectedIndex].text  + ' ; value='+p.value+'\n' +
							'Select 2: text=' + s.options[s.selectedIndex].text  + ' ; value='+s.value+'\n' +
							'Select 3: text=' + t.options[t.selectedIndex].text  + ' ; value='+t.value+'\n' 
							);
							
							
						},false);
						t.className += " t";
					}
				},false);
				s.className += " s";
			}
			var v = this.value > 0 ? vector[Number(this.value)-1][1] : [] ;
			listando(s , v, !0);
	},false);

for(var i in vector) {
var opcion = document.createElement("option");
	opcion.text = vector[i][0];
	opcion.value = Number(i)+1;
	p.add(opcion);
}

 </script>
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba