Estimados, su apoyo por favor, estoy utilizando unos combo dependientes que de acuerdo a lo seleccionado mostrar o ocultar divs con hide show con un solo botón de resultado. en el código que tengo depende de mostrar o ocultar del select o combo 2 , que es el combo producto, tengo que mostrar y ocultar 7 divs por ID, en este ejemplo solo a través de las condicionales he podido lograrlo para 3, me falta para 4 id mas y no logro hacer la función correcta. el ultimo ID sera el mismo contenidos para la ultima opción. espero que se haya comprendido.
igual dejo el código
Código Javascript
:
Ver originalvar 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>