Ajuda: Mudar de valor ao escolher um select

  • Autor Autor JamesPierre
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
J

JamesPierre

Eta
No recomendado
Verificado
Verificación en dos pasos activada
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 🙂
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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>
 
Voltar
Topo