Foros del Web » Programando para Internet » Javascript »

combos dependientes y botón resultado

Estas en el tema de combos dependientes y botón resultado en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/06/2017, 12:27
 
Fecha de Ingreso: febrero-2007
Mensajes: 232
Antigüedad: 17 años, 8 meses
Puntos: 1
combos dependientes y botón resultado

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 original
  1. var stateObject = {
  2.         "Fija": {
  3.             "Alta Nueva": ["¿Conoces el plazo de atención de un pedido Trio o Dúo?"],
  4.             "Migración": ["¿Sabes que es una Migración?"],
  5.             "Traslado": ["¿Sabes qué es un TRASLADO?"]
  6.         },
  7.         "Móvil": {
  8.             "Cambio de plan": ["¿Cómo me cambio de plan?"],
  9.             "Cambio de equipo": ["¿Cómo cambio de equipo en tienda?", "¿Cómo cambio de equipo de forma on line?"]
  10.         },
  11.         "Avería": {
  12.             "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?"],
  13.             "Internet": ["¿Sabes cuál es el plazo de atención para una avería en el servicio de internet?"],
  14.             "Cable": ["¿Sabes cuál es el plazo de atención para una avería en el servicio de cable o bloque HD?"]
  15.         }
  16.     }
  17.     window.onload = function () {
  18.         var cmbRed = document.getElementById("cmbRed"),
  19.             cmbProducto = document.getElementById("cmbProducto"),
  20.             cmbConsulta = document.getElementById("cmbConsulta");
  21.         for (var red in stateObject) {
  22.             cmbRed.options[cmbRed.options.length] = new Option(red, red);
  23.         }
  24.         cmbRed.onchange = function () {
  25.             cmbProducto.length = 1; // remove all options bar first
  26.             cmbConsulta.length = 1; // remove all options bar first
  27.             if (this.selectedIndex < 1) {
  28.               cmbProducto.options[0].text = "Seleccione una opción"
  29.               cmbConsulta.options[0].text = "Seleccione una opción"
  30.               return; // done  
  31.             }  
  32.             cmbProducto.options[0].text = "Seleccione una opción"
  33.             for (var producto in stateObject[this.value]) {
  34.                 cmbProducto.options[cmbProducto.options.length] = new Option(producto, producto);
  35.             }
  36.             if (cmbProducto.options.length==2) {
  37.               cmbProducto.selectedIndex=1;
  38.               cmbProducto.onchange();
  39.             }  
  40.            
  41.         }
  42.         cmbRed.onchange(); // reset in case page is reloaded
  43.         cmbProducto.onchange = function () {
  44.             cmbConsulta.length = 1; // remove all options bar first
  45.             if (this.selectedIndex < 1) {
  46.               cmbConsulta.options[0].text = "Seleccione una opción"
  47.               return; // done  
  48.             }  
  49.             cmbConsulta.options[0].text = "Seleccione una opción"
  50.            
  51.             var consulta = stateObject[cmbRed.value][this.value];
  52.             for (var i = 0; i < consulta.length; i++) {
  53.                 cmbConsulta.options[cmbConsulta.options.length] = new Option(consulta[i], consulta[i]);
  54.             }
  55.             if (cmbConsulta.options.length==2) {
  56.                 cmbConsulta.selectedIndex=1;
  57.                 //cmbConsulta.onchange();
  58.             }  
  59.            
  60.         }
  61.  
  62.     }
  63.  
  64. function filtrar(){
  65. var red = $('[name="red"]').find(":selected").index();
  66. indice = document.getElementById("cmbRed").selectedIndex;
  67.     if( indice == null || indice == 0 ) {
  68.     alert("Debe Seleccionar una opción");
  69.     return false;
  70. }
  71.  
  72. var producto = $('[name="producto"]').find(":selected").index();
  73.  if( indice == null || indice == 0 ) {
  74.     alert("Debe Seleccionar una opción");
  75.     return false;
  76. }
  77. //MUESTRA INFO FIJA
  78. if(producto==1){
  79.    $('#trio-duo').show();
  80.    $('#migracion').hide();
  81.    $('#traslado').hide();
  82.   }else if(producto==2){
  83.     $('#trio-duo').hide();
  84.     $('#migracion').show();
  85.     $('#traslado').hide();
  86.   }else{
  87.     $('#trio-duo').hide();
  88.     $('#migracion').hide();
  89.     $('#traslado').show();
  90.   }
  91.  
  92. var consulta = $('[name="consulta"]').find(":selected").index();
  93. if( indice == null || indice == 0 ) {
  94.     alert("Debe Seleccionar una opción");
  95.     return false;
  96. }
  97.  
  98.    
  99. }


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> 

Etiquetas: combos, dependientes, form, forma, input, js, resultado, text
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:46.