Ver Mensaje Individual
  #15 (permalink)  
Antiguo 13/07/2012, 22:10
Avatar de emprear
emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: link dependiente de un select

@furoya
Buen enfoque el tuyo, pero te cuento, todo pasa un poco por lo que expresé anteriormente
De todas maneras, mucho sentido no le encuentro (a lo mejor viendo todo el conjunto...)
Fiel a mi costumbre, y pensando en que mis observaciones puedan servir a otros, voy a hacer una expplicación detallada del mío (mi enfoque)

Si alguien me preguntase como puede identificar un elemento, le diría lisa y llanamente
document.getElementBy....., ok, pero eso es teoría pura, pero al llevar un código a la práctica, eso es otro cantar. Y a falta de más datos imaginé esto

mi select con sus opciones se genera dinamicamente a partir de una base de datos, agrego el value y el texto, y aprovecho estos en la script, sin necesidad de que esta tenga que ser modificada.

Con respecto al text, ni siquiera lo usaria, ya que visualmente y en cuanto a accesibilidad se resuelve tranquilamente por otro lado, caí en lo del innerHTML simplemente por hacer lo más parecido a lo propuesto. Tampoco me satisface mucho lo de
Cita:
es para una paguina donde se elije el año y luego el mes y el link cambia (una especie de búsqueda)
pero se puede evitar

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>cambiar href</title>
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9.  
  10. #destino{
  11. background: #FFF;
  12. color: blue;
  13. text-decoration: underline;
  14. padding: 1px 0px;
  15. text-align: left;
  16. outline: none;
  17. border: solid 1px transparent;
  18. }
  19.  
  20. #destino:hover{
  21. color: red;
  22. }
  23.  
  24. /*]]>*/
  25. <script type="text/javascript">
  26. //<![CDATA[
  27.    function cambiar_link(){
  28.    var elLink = document.getElementById('id_select');
  29.    if(elLink.value !== ""){
  30.    document.getElementById('navegar').action = elLink.value;
  31.    document.getElementById('destino').value =elLink.options[elLink.selectedIndex].text;
  32.    }
  33.    }
  34. //]]>
  35. </head>
  36. <form action="#" id="navegar">
  37. <select id="id_select" onchange="cambiar_link()">
  38. <option value="" selected="selected">destinos</option>
  39. <option value="http://google.com">google</option>
  40. <option value="http://forosdelweb.com">foros del web</option>
  41. <option value="http://emprear.com">emprear</option>
  42. </select><br /><br />
  43. <input type="submit" id="destino" value="seleccione una opción" />
  44. </form>
  45. </body>
  46. </html>

Claro, que tras conseguir nuestro cometido, caemos que no es más que un archiconocido dropdown menu a partir de un select y que el texto "ir al destino seleccionado" sería ( a mi juicio) más que suficiente.
Por supuesto que en una de esas se nos aparece @carlod_39 presentándonos un complejo sistema de selects dependientes, y la simpleza de lo previo, no cumple con los requisitos

saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.