Problema con selects

xema · #1 (**permalink**) 09/05/2003, 22:38

Hola miren tengo el siguiente código con dos selects, que según la marca cambia el select del modelo, lo que quiero es que cuando seleccionen el modelo se abra en una ventana la página correspondiente es decir si eligen alfa romeo 145 que se dirija a a145.htm y asi con cada modelo. como se hace?

Código PHP:

  <html>

 <head>

  <script language="JavaScript">

 
   function addOpt(oCntrl, iPos, sTxt, sVal){

     var selOpcion=new Option(sTxt, sVal);

     eval(oCntrl.options[iPos]=selOpcion);

   }

 
   function cambia(oCntrl){

    while (oCntrl.length) oCntrl.remove(0);

    switch (document.frm.Marca.selectedIndex){

     case 0: 

      addOpt(oCntrl,  0, "145", "0");

      addOpt(oCntrl,  1, "146", "1");

      addOpt(oCntrl,  2, "155", "2");

      break;

     case 1: 

      addOpt(oCntrl,  0, "80", "0");

      addOpt(oCntrl,  1, "a3", "1");

      addOpt(oCntrl,  2, "a4", "2");

      break;

     case 2: 

      addOpt(oCntrl,  0, "Serie 3", "0");

      addOpt(oCntrl,  1, "M3", "1");

      addOpt(oCntrl,  2, "Smart", "2");

      break;

    }

   }

  </script>

 </head>

 <body>

  <form name="frm">

   <table border="0">

    <tr>

     <td>

      Marca

     </td>

     <td>

      <select name="Marca" onchange="cambia(document.frm.Modelo)">

       <option value="Ar">Alfa Romeo</option>

       <option value="Au">Audi</option>

       <option value="Bmw">Bmw</option>

      </select>

     </td>

     <td>&nbsp;

      

     </td>

     <td>

      Modelo

     </td>

     <td>

      <select name="Modelo">

          <option value="0" selected>145</option>

          <option value="1">147</option>

          <option value="2">155</option>

        </select>

     </td>

    </tr>

   </table>

  </form>

 </body>

</html>

Ah! otra cosa que queria es que como predeterminado no aparezca seleccionada ninguna Marca ni modelo, que se vea en blanco los dos selects.

Muchas gracias

Vale el problema de las url´s creo que ya lo tengo solucionado, ahora solo me falta que cuando seleccionen el modelo se abra en una nueva página (target="_blank") y que no salga ninguna opción como predeterminada

codigo con las url´s:

Código PHP:

   <html>

 <head>

  <script language="JavaScript">

 
   function addOpt(oCntrl, iPos, sTxt, sVal){

     var selOpcion=new Option(sTxt, sVal);

     eval(oCntrl.options[iPos]=selOpcion);

   }

 
   function cambia(oCntrl){

    switch (document.frm.Marca.selectedIndex){

     case 0: 

      addOpt(oCntrl,  0, "145", "145.htm");

      addOpt(oCntrl,  1, "147", "147.htm");

      addOpt(oCntrl,  2, "155", "155.htm");

      break;

     case 1: 

      addOpt(oCntrl,  0, "80", "a80.htm");

      addOpt(oCntrl,  1, "a3", "a3.htm");

      addOpt(oCntrl,  2, "a4", "a4.htm");

      break;

     case 2: 

      addOpt(oCntrl,  0, "Serie 3", "serie3.htm");

      addOpt(oCntrl,  1, "M3", "m3.htm");

      addOpt(oCntrl,  2, "Smart", "smart.htm");

      break;

    }

   }

  </script>

 </head>

 <body>

  <form name="frm">

   <table border="0" width="482">

    <tr>

     <td width="25">

      Marca

     </td>

     <td width="89">

      <select name="Marca" onchange="cambia(document.frm.Modelo)">

       <option value="Ar">Alfa Romeo</option>

       <option value="Au">Audi</option>

       <option value="Bmw">Bmw</option>

      </select>

     </td>

     <td width="6">

      &nbsp;

     </td>

     <td width="44">

      Modelo

     </td>

     <td width="296">

      <select name="Modelo" onChange="location.href=this.form.Modelo.options[this.form.Modelo.selectedIndex].value">

       <option value="0">145</option>

          <option value="1">147</option>

          <option value="2">155</option>

      </select> <input type="button" value="Ir a..." onClick="location.href=this.form.Modelo.options[this.form.Modelo.selectedIndex].value"></td>

    </tr>

   </table>

  </form>

 </body>

</html>

caricatos · #2 (**permalink**) 09/05/2003, 23:45

Hola xema:

En un principio creo que sería más fácil poner como value el destino donde quieras que se dirija:

Código PHP:

     <select name="Modelo">

          <option value="[COLOR=blue]145.html[/COLOR] " selected>145</option>

          <option value="[COLOR=blue]147.html[/COLOR] ">147</option>

          <option value="[COLOR=blue]155.html[/COLOR] ">155</option>

     </select>

Para que no quede nada seleccionado en un principio, sería mejor poner una opción típica de selección como primera opción:
<option>Seleccione un modelo</option>

Y para que se abra una ventana nueva en vez de poner location.href, podrías poner un window.open

Resumiendo:

<select name="Modelo" onChange="if (this.selectedIndex > 0) window.open(this.value, '', '')">
<option selected>Seleccione modelo</option>
<option value="145.html">145</option>
<option value="147.html">147</option>
<option value="155.html">155</option>
</select>

Espero que te sirva...

Saludos

xema · #3 (**permalink**) 12/05/2003, 06:17

Muchas gracias Caricatos, me va muy bien, solo me falta una cosa, y es que cada marca no tiene el mismo número de modelos por ejemplo tengo esto:

Código:

  case 2: 
      addOpt(oCntrl,  0, "318", "145.htm");
      addOpt(oCntrl,  1, "320", "147.htm");
      addOpt(oCntrl,  2, "323", "155.htm");
      addOpt(oCntrl,  3, "325", "145.htm");
      addOpt(oCntrl,  4, "330", "147.htm");
      addOpt(oCntrl,  5, "M3", "155.htm");
	  addOpt(oCntrl,  6, "Z3", "145.htm");
      break;
              case 3: 
      addOpt(oCntrl,  0, "Corvette", "145.htm");
      break;
              case 4: 
      addOpt(oCntrl,  0, "Cruiser", "145.htm");
      addOpt(oCntrl,  1, "Viper", "147.htm");
      break;

así por ejemplo si primero elijo el case 2 y luego el case 3
aparece la siguiente lista:
Corvette
320
323
325
330
M3

es decir en las listas más pequeñas, rellenan los huecos con las opciones anteriores, esto a que es debido y como puedo solucionarlo?

por favor ayudenme :(

JavierB · #4 (**permalink**) 12/05/2003, 10:50

Hola, xema. Hola, caricatos.

Añade una línea más al código de caricatos:

function cambia(oCntrl){
document.frm.Modelo.length=0;
switch (document.frm.Marca.selectedIndex){

Creo que te servirá. Saludos,

xema · #5 (**permalink**) 12/05/2003, 16:33

Muchas gracias Javier era eso exactamente lo que me faltaba, de verdad muchas gracias a todos

Me falta solo una cosilla

si elijo una opción se me abre en una ventana nueva, pero con el ir a me la abre en la misma.

como deberia cambiar esto:

Código:

<input name="button" type="button" onClick="location.href=this.form.Modelo.options[this.form.Modelo.selectedIndex].value" value="Ir a..."></td>

para que me lo abriera en una nueva ventana?

Kaopectate · #6 (**permalink**) 12/05/2003, 16:42

Cambialo por:

Código PHP:

  <input name="button" type="button" onClick="javascript:open(this.form.Modelo.options[this.form.Modelo.selectedIndex].value)" value="Ir a...">

Saludos.

xema · #7 (**permalink**) 12/05/2003, 17:11

en local se me queda la página atascada, no se abre una nueva, ni puedo hacer nada, es correcto el código?

Kaopectate · #8 (**permalink**) 12/05/2003, 17:35

Yo creo que si:

this.form.Modelo.options[this.form.Modelo.selectedIndex].value

this = este objeto (el botón)
form = el tag form asociado al botón
Modelo = el nombre del select
Options = Las opciones del select
value = el valor de la opción (el URL)

En cuanto al índice:

selectedIndex = el índice seleccionado actualmente

No le veo nada de malo.

Saludos.

(Revisa que tus options tengan como value URLs válidos)

xema · #9 (**permalink**) 12/05/2003, 17:39

mirenlo aqui:
http://www.xematuning.com/fotosprueba2.htm

Kaopectate · #10 (**permalink**) 13/05/2003, 10:23

xema, yo lo veo funcionar muy bien....

xema · #11 (**permalink**) 13/05/2003, 11:34

si lo elijes de la lista va muy bien, pero si abres el modelo dándole al boton ir a a mi no se me abre nada....

Kaopectate · #12 (**permalink**) 13/05/2003, 11:42

A ver si comprendo...

Si no has seleccionado ninguna marca...me cuesta pensar que sentido tiene el botón "Ir a", en ese caso yo lo deshabilitaría.

En el caso en el que ya se ha seleccionado una marca, mas no un medelo, yo le podría "selected" al primero de la lista para que selectedindex tenga un valor util o añadiría al principio una opción como "...Seleccione modelo" en cuyo caso el botón debería estar deshabilitado mientras no se seleccione otro valor.

En resumen, creo que tu problema es solo el valor inicial del selectedIndex.

Saludos.

xema · #13 (**permalink**) 13/05/2003, 11:54

no a ver que lo explique paso a paso, yo selecciono por ejemplo la marca Audi y el modelo que quiero es el audi 80 (el primero) así al sellecionar la marca, ya aparece el modelo audi 80, así que le doy al boton ir a, y es cuando se queda atascado, por eso, como deberia hacer para que puedan elegir ese modelo, ya que aunque abran la lista y vuelvan a seleccionar el modelo 80, no se abre la página, y como desactivo el boton antes de que seleccione la marca?

Muchas gracias de verdad

Kaopectate · #14 (**permalink**) 13/05/2003, 12:02

Hagamos una prueba:

Ubica esta parte de tu códogo (justo al final de la función que agrega las opciones)

Código PHP:

        addOpt(oCntrl,  6, "Polo", "polo.htm");

      addOpt(oCntrl,  7, "Vento", "vento.htm");

      break;

    }

   }

  </script>

Agrega una linea para que quede asi:

Código PHP:

        addOpt(oCntrl,  6, "Polo", "polo.htm");

      addOpt(oCntrl,  7, "Vento", "vento.htm");

      break;

    }

    document.frm.Modelo.selectedIndex=0;

 
   }

  </script>

Prueba y dime.

Saludos.

xema · #15 (**permalink**) 13/05/2003, 12:10

ya lo he hecho y sigue sin funcionar :( pruebalo tu mismo en la dirección de antes y verás....

Kaopectate · #16 (**permalink**) 13/05/2003, 12:24

Ok, ya lo vi...dame un segundo...

Xema...en el open del select tienes algo como:

open('ventana.htm', '', '')

En el del botón tienes:

open('ventana.htm');

Prueba poner en la del botón igual a como la tienes en el select a ver que sucede.

xema · #17 (**permalink**) 13/05/2003, 12:42

a ver que no lo e entendido del todo, estos son los open, que debo cambiar?

Código:

  <select name="Modelo" onChange="if (this.selectedIndex > 0) window.open(this.value, '', '')">
                                  <option selected>Seleccione modelo</option>
                                </select> <input name="button" type="button" onClick="javascript:open(this.form.Modelo.options[this.form.Modelo.selectedIndex].value)" value="Ir a..."></td>

Kaopectate · #18 (**permalink**) 13/05/2003, 12:44

Fijate, yo lo que he hecho desde mi maquina es cambiar los open por alert. De ese modo me dice cual es la dirección a la que he de saltar (sin hacerlo).

Haz esa prueba primero.

Cambia la palabra open por alert (y quita los dos parámetros vacíos del primer open.

Espero.

xema · #19 (**permalink**) 13/05/2003, 12:47

si así los alert funcionan correctamente

Kaopectate · #20 (**permalink**) 13/05/2003, 12:49

Si en ambos casos obtienes valores correctos, entonces en ambos casos debería abrir correctamente tu ventana.

Pon ahora los dos open iguales (solo con el primer parámetro).

xema · #21 (**permalink**) 13/05/2003, 12:59

que es lo que he hecho que no debo?

e puesto esto:

Código:

 <select name="Modelo" onChange="if (this.selectedIndex > 0) window.open(this.value, '', '')">
                                  <option selected>Seleccione modelo</option>
                                </select> <input name="button" type="button" onClick="window.open(this.value, '', '')" value="Ir a...">

y se me abre la nueva ventan pero con dirección \Ir a... es que no me aclaro con esto.....

ya está ya esta con esto:

<select name="Modelo" onChange="if (this.selectedIndex > 0) window.open(this.value, '', '')">
<option selected>Seleccione modelo</option>
</select> <input name="button" type="button" onClick="window.open(this.form.Modelo.options[this.form.Modelo.selectedIndex].value)" value="Ir a...">

Muchisimas GRacias :)

Kaopectate · #22 (**permalink**) 13/05/2003, 13:28

this se refiere siempre al elemento sobre el cual estas parado. Si la instrucción está sobre un select, this se refiere al select. Si estás sobre el botón, this es el botón. Por lo tanto el primer open es correcto, mientras que el segundo no.

Vamos a hacer una función para abriri tu popup.

function abrir(){
var indice = document.frm.Modelo.selectedIndex;
var sURL = document.frm.Modelo.options[indice].value;
open(sURL);
}

Desde el select haremos lo siguiente:

<select name="Modelo" onChange="if (this.selectedIndex > 0) abrir()">
<option selected>Seleccione modelo</option>
Y con el botón lo haremos asi:

<input name="button" type="button" onClick="abrir()" value="Ir a...">

Prueba a ver que sucede.

xema · #23 (**permalink**) 13/05/2003, 13:35

Muchisimas gracias, ahora funciona muy bien, si quieres verlo funcionando hazlo aqui:

http://www.xematuning.com/fotos.htm

ahora ya iré cambiando el contenido de cada modelo... muchas gracias

Kaopectate · #24 (**permalink**) 13/05/2003, 14:20

Bueno, me alegro...

Saludos.