link dependiente de un select

carlod_39 · #1 (**permalink**) 12/07/2012, 19:30

como hago que un link cambie dependiendo de lo que se seleccione en el select

emprear · #2 (**permalink**) 12/07/2012, 21:35

Que cambie que cosa del link?
el href?
el title?
el texto?
algún estilo?

me inclino por lo primero, usas el evento onchange()
recibis el value del select
hacés un
window.location.href = valor_del_select

Saludos

gebremswar · #3 (**permalink**) 12/07/2012, 21:48

Hola carlod_39, que tal.

Usa el evento onchange para llamar una función en el select y dentro de tu función cambia el href de la siguiente manera:

Código Javascript:

Ver originaldocument.getElementById("mienlace").href = url;

.
En url indicas la nueva dirección.

racba · #4 (**permalink**) 12/07/2012, 22:43

Hola a todos:
Que les parece este codigo:

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
 function cambiar_link(){
      var _link = new Array('milink1', 'milink2', 'milink3');
      alert('Este es el array con todos los links: '+_link);
      _div = document.getElementById('id_div');
      _select = document.getElementById('id_select')
      _optioncant = _select.length;
      alert ('Las cantidad de opciones son: '+_optioncant);
      _option=_select.options[_select.selectedIndex].index;
      alert('Esta es la opcion numero: '+_option+ '. Recordar que la primera opcion es 0');
      for (i=1; i< _optioncant; i++){
          if (i == _option){
            _div.innerHTML = '<a href="http://www.'+_link[i-1]+'.com">Mi link '+i+'</a>';
            break;
          }
       }
    }
   </script>
</head>
<body>
<form>
  <select id="id_select" onchange="cambiar_link()">
   <option>OPCIONES</option>
   <option>opcion 1</option>
   <option>opcion 2</option>
   <option>opcion 3</option>
  </select>
  </form>
  <div id='id_div'></div>
  </body>
 </html>

carlod_39 · #5 (**permalink**) 13/07/2012, 08:39

gracias a todos por su ayuda

furoya · #6 (**permalink**) 13/07/2012, 10:28

No está mal ese ejemplo, racba.

No lo probé, pero cubre algunas posibilidades a futuro.

Porque nuestro amigo carlod_39 vino a dar las gracias, pero jamás a explicar qué es lo que quiso cambiar.

Quizá deberíamos esperar a que diera un mínimo acuse de recibo a la respuesta de emprear, o a su interpretación y la de gebremswar.

Tampoco hay que regalarles un cutandpaste si no muestran ningún empeño; o mañana lo vas a tener mangueando de nuevo, con otro mensaje incomprensible de los que no debería haber ninguno por aquí.

carlod_39 · #7 (**permalink**) 13/07/2012, 10:56

efectivamente lo que quería era que al seleccionar una opción en el select la dirección del link cambia el href
el ejemplo lo probé y me funciono

furoya no se que vienes a hacer aquí ¿a puro molestar? porque no aportas nada de interés, gracias a esta pagina y a personas como racba, gebremswar y emprear e aprendido mucho,
cuando me registe no sabia nada.
Yo no estoy haciendo ningún trabajo solo quiero aprender

furoya · #8 (**permalink**) 13/07/2012, 11:26

Le vine a contestar a racba.

Y no mientas ¿o piensas que somos idiotas, y no vamos a notar que no pusiste ni una línea de código, que preguntaste cualquier cosa y que nunca buscaste algo que está en cualquier tutorial?

Y antes de venir a discutirme a qué vengo, revisa todos mis mensajes. Ahí está perfectamente explicado.

carlod_39 · #9 (**permalink**) 13/07/2012, 11:42

nunca pregunto sin buscar por todos lados antes, si no fuera así estaría preguntando a cada rato o crees que ahora nomas se me ocurrió, no he aportado porque no aun no tengo los conocimientos suficientes, estoy recién en primer año de la universidad

furoya · #10 (**permalink**) 13/07/2012, 12:20

¿Es necesario postear un mensaje incoherente, del cual apenas se puede interpretar alguna idea suelta?

Veamos.
¿Estás en en primer año de una universidad?. No creo. A alguien que redacta así no lo pueden dejar salir del 4º grado de primaria.

¿Buscaste antes de preguntar? Este mismo Foro está lleno de ejemplos varios para cada caso. El único que puede creerte eso es el que recién llega de otro planeta y no conoce FdW.

¿No aportas porque no tienes conocimientos suficientes? Te felicito, lo bien que haces. Si encima tenemos que aguantar a los que no saben y responden cualquier cosa ...
Pero acá se colabora posteando bien (tu pregunta está mal formulada, lo puede ver cualquiera más allá de que mientas pensando que nadie va a subir el escrol), se colabora al no preguntar lo que está en cualquier tutorial con sus ejemplos (¿ahora que vas a decir, que también pusiste el ejemplo que no te andaba?). Y es muy sugestivo que aparecieras cuando racba publicó un c&p (como te dije, vine a responderle a él, ya vi que aún con su puñado de mensajes, está viniendo a colaborar; porque seguramente sí leyó el Foro y aprendió antes de registrarse).

Lo demás es muy incoherente, si tuviese que interpretarlo ... sería terrible, porque encima demostraría que no tienes la menor idea de cómo comportarte en un foro.

que es algo que a estas alturas no me sorprendería para nada.

No creo que te des cuenta, o no creo que te importe, el ridículo que estás haciendo al venir a desafiar a alguien que tiene más post que tú. Más años que tú. Y muchísimos más aportes que tú.

Nadie, que no tenga algún problemita, puede pensar que no sé lo que estoy haciendo. Y menos que lo que estoy haciendo está mal.

Que a los desubicados no les guste, es otra historia.
Y es la idea.

emprear · #11 (**permalink**) 13/07/2012, 13:08

Cita:

Iniciado por racba

Hola a todos:
Que les parece este codigo:

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
 function cambiar_link(){
      var _link = new Array('milink1', 'milink2', 'milink3');
      alert('Este es el array con todos los links: '+_link);
      _div = document.getElementById('id_div');
      _select = document.getElementById('id_select')
      _optioncant = _select.length;
      alert ('Las cantidad de opciones son: '+_optioncant);
      _option=_select.options[_select.selectedIndex].index;
      alert('Esta es la opcion numero: '+_option+ '. Recordar que la primera opcion es 0');
      for (i=1; i< _optioncant; i++){
          if (i == _option){
            _div.innerHTML = '<a href="http://www.'+_link[i-1]+'.com">Mi link '+i+'</a>';
            break;
          }
       }
    }
   </script>
</head>
<body>
<form>
  <select id="id_select" onchange="cambiar_link()">
   <option>OPCIONES</option>
   <option>opcion 1</option>
   <option>opcion 2</option>
   <option>opcion 3</option>
  </select>
  </form>
  <div id='id_div'></div>
  </body>
 </html>

Haya paz !!!

@racba
permitime simplificarlo un poco

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>cambiar href</title>
<script type="text/javascript">
//<![CDATA[
    function cambiar_link(){
    var elLink = document.getElementById('id_select');
    if(elLink.value !== ""){
    document.getElementById('destino').href = elLink.value;
    document.getElementById('destino').innerHTML =elLink.options[elLink.selectedIndex].text;
    }
    }
//]]>
</script>
</head>
<body>
<form action="#">
<select id="id_select" onchange="cambiar_link()">
<option value="">OPCIONES</option>
<option value="http://google.com">google</option>
<option value="http://forosdelweb.com">foros del web</option>
<option value="http://emprear.com">emprear</option>
</select>
</form>
<a href="#" id="destino">ir a</a>
</body>
</html>

De todas maneras, mucho sentido no le encuentro (a lo mejor viendo todo el conjunto...)

Las opciones más comunes para esto serían

A. que al hacer onchange() haga directamente la redirección
B. no hacer el onchange(), agregar un botón y que ejecute la función onclick()
@carlod_39
sin ánimo de inmiscuirme en tu pequeño entredicho con @furoya, si hubieses comentado

Cita:

efectivamente lo que quería era que al seleccionar una opción en el select la dirección del link cambia el href

oportunamente, este posts no tendría más de 3 respuestas (incluido tu agradecimiento)

Saludos

carlod_39 · #12 (**permalink**) 13/07/2012, 14:21

De esa manera se ve mucho mas simple

Cita:

De todas maneras, mucho sentido no le encuentro (a lo mejor viendo todo el conjunto...)

es para una paguina donde se elije el año y luego el mes y el link cambia (una especie de búsqueda)

Cita:

sin ánimo de inmiscuirme en tu pequeño entredicho con @furoya, si hubieses comentado

Cita:

efectivamente lo que quería era que al seleccionar una opción en el select la dirección del link cambia el href

oportunamente, este posts no tendría más de 3 respuestas (incluido tu agradecimiento)

lo que pasa es que respondieron tan rápido que pensé que ya se avía entendido

racba · #13 (**permalink**) 13/07/2012, 19:11

Hola emprear:
Revise tu codigo y esta barbaro.
Me sirve de ayuda a como tipear lo menos posible.

furoya · #14 (**permalink**) 13/07/2012, 19:54

Cita:

Iniciado por carlod_39

... lo que pasa es que respondieron tan rápido que pensé que ya se avía entendido

==========================================

Cita:

Iniciado por racba

Hola emprear:
Revise tu codigo y esta barbaro.

Sí, como de costumbre. Yo no se lo digo porque parece que fuera un chupamedias.

Lo que no me exime de agregar algo más.

emprear : El asunto que me llamó la atención del ejemplo de racba, es que si bien ya es C&P, no deja de ser didáctico. Y encima cubre esa falta de precisión original que todavía seguimos comentando.

Si bien yo hubiese empezado a probar con nodos, él prefirió el innerHTML, que es más fácil de entender.
Porque resulta que otra cosa que se podía "cambiar" era el contenido del anchor.

La lógica sería así : para cambiar el href podemos hacerlo de la manera fácil, tal como lo pusiste tú

Código:

...
document.getElementById('destino').href = "";
...

pero para cambiar el texto o vas a los nodos o mueres en el innerHTML.
¡Y para eso se explica todo en innerHTML!

Tu idea es usar un escript que dependa del selector.
El ejemplo anterior hace depender el select de un array.
Aunque no totalmente.

El siguiente paso sería crear también los option dependiendo de los elementos de array's.
Un mecanismo del tipo BDAL (Base de Datos Avant la Lettre) sobre listas en cada script.

Y por supuesto, usando también innerHTML.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 * *"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>cambiar href</title>
<script type="text/javascript">
//<![CDATA[
var _link = new Array('milink0', 'milink1', 'milink2');

//var _dest = new Array());

var _optioncant = _link.length;

var _select;

function llenar_selector(){
var _optiontotal = "";

_select = document.getElementById('id_select');

for (i=0; i< _optioncant; i++){
_optiontotal += "<option value=\""+ _link[i] +"\">"+ _link[i] +"</option>\r\n";
}

_select.innerHTML = _optiontotal;

}


function cambiar_link(){

var _div = document.getElementById('id_div');

_option=_select.options[_select.selectedIndex].index;

for (i=0; i< _optioncant; i++){
if (i == _option){
_div.innerHTML = "<a href=\"http://www."+ _select.options[i].value +".com\">"+ _select.options[i].text +"</a>";
break;
}
}

}

//]]>
</script>
</head>
<body>
<form>
<select id="id_select" onchange="cambiar_link()" 
onmousedown="llenar_selector(); this.removeAttribute('onmousedown')">
<option>OPCIONES</option>
</select>

<span id='id_div'></span>
</form>

</body>
</html>

[Nota : a mi me gusta más desvirtuar los temas, pero éste puede seguir mejorando. Para llevarlo a cualquier lado, siempre hay tiempo.]

emprear · #15 (**permalink**) 13/07/2012, 22:10

@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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>cambiar href</title>
 
<style type="text/css">
/*<![CDATA[*/
 
#destino{
background: #FFF;
color: blue;
text-decoration: underline;
padding: 1px 0px;
text-align: left;
outline: none;
border: solid 1px transparent;
}
 
#destino:hover{
color: red;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
    function cambiar_link(){
    var elLink = document.getElementById('id_select');
    if(elLink.value !== ""){
    document.getElementById('navegar').action = elLink.value;
    document.getElementById('destino').value =elLink.options[elLink.selectedIndex].text;
    }
    }
//]]>
</script>
</head>
<body>
<form action="#" id="navegar">
<select id="id_select" onchange="cambiar_link()">
<option value="" selected="selected">destinos</option>
<option value="http://google.com">google</option>
<option value="http://forosdelweb.com">foros del web</option>
<option value="http://emprear.com">emprear</option>
</select><br /><br />
<input type="submit" id="destino" value="seleccione una opción" />
</form>
</body>
</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

furoya · #16 (**permalink**) 14/07/2012, 09:11

Es que no sé si tiene que tener sentido.
En realidad estamos divagando con la excusa que nos dio la ambigüedad (en rigor de verdad, "multigüedad", pero nosotros estamos tomando sólo dos caminos, por ahora) que nos dejó el primer post.

Lo de las fechas ... puede ser, o no; supongo que carece de importancia. Viendo tu ejemplo, se me ocurre una página de un periódico que se edita cuando lo pueden, que ya tiene unos 20 números en la calle, y que para ver su contenido en la web ponen un selector con las fechas que cambia un enlace que muestra un thumbnail de la portada, el cual se cambiará dependiendo de la elección, junto con el destino.

Tu último código simula un link, pero es un botón con submit. Lo mismo se puede cambiar el scr de una imagen que tenga un evento onclick; y tendríamos resuelto el caso arriba mencionado.

Para redondear la apostilla, si a carlod_39 le sirve algo, me alegro por él. Porque es seguro que no puso su (pésima) pregunta para aprender.
O lo hizo para obtener el trabajo hecho, porque no sabe pero se mete igual, y eso explicaría su forma de expresarse. O es otro que viene a empiojar el sitio, preguntando cualquier cosa de cualquier manera para que tengamos que ponerlo en vereda, y después quejarse de lo mal que lo tratamos, como si la víctima fuese él.

Así que el sentido práctico de todo esto me nefrega tres pitos. Si empezamos a poner código didáctico, seguimos así.

Y ya que mencionaste los selectores en cadena, aprovecho a comentar que es cierto, se acerca mucho a lo que estamos posteando. Y también es algo muuuy repetido como para que vengan a preguntarlo. Un caso donde participé es el tema

Iframe con Javascript

donde los dos sabíamos cuál era el drama, pero la estiramos hasta que no hartó.
Si el consultante no hubiese terminado mostrando cierta grandeza, tapándome la boca, ni le cerraba el asunto. Pero bueno, también hay que premiar al que hace algo bien.