Listas desplegables - combinar y devolver texto

[mgasion]

Buenas,

Vuelvo con otra duda...

Tengo listo el código para crear una lista desplegable que cuando pincho en un ítem, mediante el código "onchange" me redirija a la URL que le mando.

Mi duda... hay forma de combinar los ítems de dos listas diferentes, y que según la combinación dirija a URL's distintas?

Por ejemplo

Nombre (y en el desplegable, los items Ana, Laura, María)
Ciudad (y en el desplegable, los ítems Barcelona, Madrid, Zaragoza)

Me gustaría que al tener la selección Ana + Barcelona me lleve a la URL 1, al tener Ana + Madrid a la URL 2, al tener Laura + Barcelona a la URL 3... y así sucesivamente.

No sé si me he explicado muy bien... Sería el clásico desplegable, pero que en vez de tomar en cuenta un valor, toma en cuenta dos. Cuando seleccionamos el valor de la primera lista, se carga la segunda lista con las opciones y a partir de ahí, al seleccionar el ítem de la segunda lista te dirije al destino marcado.

A ver si alguien me puede echar una mano :)

Gracias!

[fertest]

Hola,
Si dices que ya has hecho que uno de los combos cargue al otro, entonces bastaría con programar el evento onchange del segundo, para que cuando elijan la segunda opción, tome los valores del primero y el segundo y decida dónde ir.

Salu2

[mgasion]

Hola,

No, lo que tengo hecho es el primer combo y el evento onchange para redirigir, lo que necesito saber es como añadir el segundo combo y que la url dependa de la combinación... no sé el código que tengo que poner!

Gracias,

[fertest]

Hola,
existen multitud de ejemplos, en internet, para cambiar el contenido de un combo en función de la selección de otro. No te pongo uno concreto, porque esto depende de la tecnología que desees usar (cliente-servidor o cliente). Un ejemplo simple sería modificar el evento onchange del primer combo para que llame a una función javascript que recargue el segundo combo con los valores adecuados.

Luego, bastaría con poner el evento onchange del segundo combo para que llame a otra función javacript, en la que se puede acceder al elemento seleccionado del primer combo y del segundo combo y hacer las operaciones que deseemos.

Salu2

[mgasion]

Hola,
Me puedes poner algún ejemplo en cliente?? Es que el problema es que no conozco cómo montar el código, necesitaría algún ejemplo... sorry!!

Gracias por la ayuda ;)

[fertest]

Hola,
aquí te pongo un ejemplo muy básico para que vayas viendo cómo funcionaría el tema. Como ya te digo, se trata de un ejemplo básico, al que luego le puedes añadir librerías y opciones para que sea algo mas profesional.

Lo primero, hay que meter entre las tags HEAD de tu página el siguiente código:

Código:

<script type="text/javascript" language="javascript">
    //Array de datos para los valores del segundo combo, cuando se haya seleccionado la primera opción en el primer combo
    var datos1 = new Array();
    datos1[0] = new Array('1','Combo 1 - Elemento 1');
    datos1[1] = new Array('2','Combo 1 - Elemento 2');
    //Array de datos para los valores del segundo combo, cuando se haya seleccionado la segunda opción en el primer combo
    var datos2 = new Array();
    datos2[0] = new Array('1','Combo 2 - Elemento 1');
    datos2[1] = new Array('2','Combo 2 - Elemento 2');

    //Función que se dispara con el evento onchange del primer combo y que es la encargada de cargar el segundo combo
    function cargaCombo2(cmb1) {
      var value = cmb1.options[cmb1.selectedIndex].value;
      if (value == '1') {
        rellenarCombo2(datos1);
      } else if (value == '2') {
        rellenarCombo2(datos2);
      } else rellenarCombo2();
      return true;
    }

    //Función utilizada por la anterior y que sirve para eliminar el contenido del segundo combo y rellenarlo con el array de datos que se le pase
    function rellenarCombo2(datos) {
      var combo = document.getElementById('combo2');
      for (var i = combo.options.length;i>=0;i--)
        combo.options[i] = null;
      if (datos==null || datos.length==0) return true;
      combo.options[0] = new Option('', '');
      for (var i=0;i<datos.length;i++) {
        combo.options[combo.options.length] = new Option(datos[i][1], datos[i][0]);
      }
    }

    //Función que se dispara con el evento onchange del segundo combo y que se encarga de redirigir a la url correspondiente en función de los valores seleccionados en ambos combos
    function enviar(cmb2) {
      var valorCombo1 = document.getElementById('combo1').options[document.getElementById('combo1').selectedIndex].value;
      var valorCombo2 = cmb2.options[cmb2.selectedIndex].value;
      if (valorCombo1=='1') {
        if (valorCombo2=='1') {
          document.location.href = "http://www.iriazabal.com";
        } else if (valorCombo2=='2') {
          document.location.href = "http://www.iriazabal.com/id-creditssystem-documentation.htm";
        }
      } else if (valorCombo1 == '2') {
        if (valorCombo2=='1') {
          document.location.href = "http://www.iriazabal.com/id-languageflags-documentation.htm";
        } else if (valorCombo2=='2') {
          document.location.href = "http://www.iriazabal.com/id-homeslide-documentation.htm";
        }
      }
    }
  </script>

A continuación, tienes que meter los dos combos en tu html, dentro de la parte del BODY:

Código HTML:

<select name="combo1" id="combo1" onchange="return cargaCombo2(this);">
    <option value=""></option>
    <option value="1">Primera opci&oacute;n</option>
    <option value="2">Otra opci&oacute;n</option>
  </select>
  <select name="combo2" id="combo2" onchange="return enviar(this);">
  </select> 

Si insertas este código en tu página, comprobarás que las cuatro opciones posibles te redirigen a cuatro páginas diferentes.

Espero que te sirva de ejemplo, aunque, como ya he dicho, esto es solo un ejemplo.

Salu2