igual dejo el código
Código Javascript:
Ver original
var stateObject = { "Fija": { "Alta Nueva": ["¿Conoces el plazo de atención de un pedido Trio o Dúo?"], "Migración": ["¿Sabes que es una Migración?"], "Traslado": ["¿Sabes qué es un TRASLADO?"] }, "Móvil": { "Cambio de plan": ["¿Cómo me cambio de plan?"], "Cambio de equipo": ["¿Cómo cambio de equipo en tienda?", "¿Cómo cambio de equipo de forma on line?"] }, "Avería": { "Fija": ["¿Cuál es el plazo de atención para una avería en el servicio fijo (Línea básica) por teléfono? ", "¿Cuál es el plazo de atención para una avería en el servicio fijo (Línea básica) presencial?"], "Internet": ["¿Sabes cuál es el plazo de atención para una avería en el servicio de internet?"], "Cable": ["¿Sabes cuál es el plazo de atención para una avería en el servicio de cable o bloque HD?"] } } window.onload = function () { var cmbRed = document.getElementById("cmbRed"), cmbProducto = document.getElementById("cmbProducto"), cmbConsulta = document.getElementById("cmbConsulta"); for (var red in stateObject) { cmbRed.options[cmbRed.options.length] = new Option(red, red); } cmbRed.onchange = function () { cmbProducto.length = 1; // remove all options bar first cmbConsulta.length = 1; // remove all options bar first if (this.selectedIndex < 1) { cmbProducto.options[0].text = "Seleccione una opción" cmbConsulta.options[0].text = "Seleccione una opción" return; // done } cmbProducto.options[0].text = "Seleccione una opción" for (var producto in stateObject[this.value]) { cmbProducto.options[cmbProducto.options.length] = new Option(producto, producto); } if (cmbProducto.options.length==2) { cmbProducto.selectedIndex=1; cmbProducto.onchange(); } } cmbRed.onchange(); // reset in case page is reloaded cmbProducto.onchange = function () { cmbConsulta.length = 1; // remove all options bar first if (this.selectedIndex < 1) { cmbConsulta.options[0].text = "Seleccione una opción" return; // done } cmbConsulta.options[0].text = "Seleccione una opción" var consulta = stateObject[cmbRed.value][this.value]; for (var i = 0; i < consulta.length; i++) { cmbConsulta.options[cmbConsulta.options.length] = new Option(consulta[i], consulta[i]); } if (cmbConsulta.options.length==2) { cmbConsulta.selectedIndex=1; //cmbConsulta.onchange(); } } } function filtrar(){ var red = $('[name="red"]').find(":selected").index(); indice = document.getElementById("cmbRed").selectedIndex; if( indice == null || indice == 0 ) { alert("Debe Seleccionar una opción"); return false; } var producto = $('[name="producto"]').find(":selected").index(); if( indice == null || indice == 0 ) { alert("Debe Seleccionar una opción"); return false; } //MUESTRA INFO FIJA if(producto==1){ $('#trio-duo').show(); $('#migracion').hide(); $('#traslado').hide(); }else if(producto==2){ $('#trio-duo').hide(); $('#migracion').show(); $('#traslado').hide(); }else{ $('#trio-duo').hide(); $('#migracion').hide(); $('#traslado').show(); } var consulta = $('[name="consulta"]').find(":selected").index(); if( indice == null || indice == 0 ) { alert("Debe Seleccionar una opción"); return false; } }
Código HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <ul> <li><span class="titulo-combo">Tipo de red</span> <select class="combo" id="cmbRed" name="red" required> <option value="0" selected="selected">Seleccione una opción</option> </select> </li> <li><span class="titulo-combo">Tipo de producto</span> <select class="combo" id="cmbProducto" name="producto" required> <option value="0" selected="selected">Seleccione una opción</option> </select> </li> <li><span class="titulo-combo">Tipo de consulta</span> <select class="combo" id="cmbConsulta" name="consulta" required> <option value="0" selected="selected">Seleccione una opción</option> </select> </li> </ul> <input class="btn-continuar" type="button" value="Continuar" onclick="filtrar();"> </form> <div id="trio-duo" style="display:none;"> CONTENIDO DIV 1 </div> <div id="migracion" style="display:none;"><span class="titulo-infografia">¿Sabes que es una Migración?</span> CONTENIDOS DIV 2 </div> <div id="traslado" style="display:none;"><span class="titulo-infografia">¿Sabes qué es un TRASLADO?</span> CONTENIDO DIV 3 </div> <div id="cambio-de-plan" style="display:none;"><span class="titulo-infografia">¿Cómo me cambio de plan?</span> contenidos div 4 </div> <div id="equipo-tienda" style="display:none;"><span class="titulo-infografia">¿Cómo cambio de equipo en tienda?</span> CONTENIDO DIV 5 </div> <div id="equipo-online" style="display:none;"><span class="titulo-infografia">¿Cómo cambio de equipo de forma on line?</span> CONTENIDO DIV 6 </div> <div id="averia" style="display:none;"><span class="titulo-infografia">¿Cómo cambio de equipo de forma on line?</span> CONTENIDO DIV 7 </div>