Ayuda: Cambiar de valor al elegir un select

  • Autor Autor JamesPierre
  • Fecha de inicio Fecha de inicio
J

JamesPierre

No recomendado
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
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 🙂
 
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>
 
Atrás
Arriba