SoloCodigo

Programación Web y Scripting => JavaScript => Mensaje iniciado por: lotusr en Viernes 20 de Enero de 2006, 19:38

Título: Navegar Entre Los Option De Un Select
Publicado por: lotusr en Viernes 20 de Enero de 2006, 19:38
Hola, ¿¿¿¿Como estan???? Agradeciendo por adelantado su ayuda paso a explicarles

Necesito que en un objeto de formulario "select" que pueda seleccionar los diversos item por un script sin necesidad que el usuario de la pagina se mueva por el "select" lo que deseo hacer es como ir hacia adelante o hacia atras de la lista de "option" del "select" al darle click a un boton. del mismo formulario donde esta alojado el control en cuestion

Anormemente agradesido se despide

LOTUSR
Título: Re: Navegar Entre Los Option De Un Select
Publicado por: Altareum en Lunes 23 de Enero de 2006, 15:29
Hola lotusr:

Mirá, hay dos formas (o al menos ahora se me ocurren 2). La primera y más fácil es, creas un select, por ejemplo este:

Código: Text
  1.  
  2. <select name="sel" id="sel">
  3.    <option value="1">Opcion 1</option>
  4.    <option value="2">Opcion 2</option>
  5.    <option value="3">Opcion 3</option>
  6. </select>
  7.  

Para hacer los cambios, por ejemplo, usas estos links:
Citar
<br><a href="javascript:seleccionar(1);">Opcion 1</a>
<br><a href="javascript:seleccionar(2);">Opcion 2</a>
<br><a href="javascript:seleccionar(3);">Opcion 3</a>


Los cuales llaman a la siguiente funcion de javascript:
Citar
function seleccionar(num){
   document.getElementById('sel').value = num;
}



La función lo que hace es asignarle un valor al select, por lo cual dicho valor tiene que ser uno de los posibles.

Espero que te sirva.

Altareum.
Título: Re: Navegar Entre Los Option De Un Select
Publicado por: lotusr en Lunes 23 de Enero de 2006, 19:14
Muchas gracias Altareum por tu respuesta esta muy buena, pero tengo un problema con referente a ese punto por que los "value" de los "option" de "select" no son consecutivos y por consiguiente no puedo intuir cual es el proximo. Ademas todo se hace desde un solo control "button". Lo que necesito hacer es como los botones del explorador que te lleva a la siguiente pagina o la anterior. Yo queria saber si exitia en JavaScript un codigo interno de cada option en un select que me permita identificar la posición que tienes en el listado del control y por allí me permita navegar por todo el "select" o un metodo que me lleve al siguiente option o al anterior como si de un arreglo de php fuera.

Agradeciendote Altareum tu buenisima respuesta me despido y espero me puedas tu o otros ayudar, gracias

ATTE

LOTUSR
Título: Re: Navegar Entre Los Option De Un Select
Publicado por: Altareum en Miércoles 25 de Enero de 2006, 18:13
lotusr, en el método que te expliqué anteriormente, no necesariamente tienes que saber el orden ya que este se basa en el value de cada option para establecerse...

Por ende, esto también sirve:
Citar
<select name="sel" id="sel">
  <option value="home">Home</option>
  <option value="contacto">Contacto</option>
  <option value="servicios">Servicios</option>
</select>

<br><a href="javascript:seleccionar('home');">Opcion 1</a>
<br><a href="javascript:seleccionar('contacto');">Opcion 2</a>
<br><input type="button" onClick="javascript:seleccionar('servicios');">Opcion 3</a>


Si igualmente no te sirve, avisa que hay otro método que se puede utilizar, pero ahora no tengo mucho tiempo....

Saludos.
Altareum.
Título: Re: Navegar Entre Los Option De Un Select
Publicado por: mateamargo en Viernes 27 de Enero de 2006, 23:10
¿De casualidad es algo como esto lo que buscás?

Código: Text
  1.  
  2. &#60;html&#62;
  3. &#60;body&#62;
  4.  
  5. &#60;form&#62;
  6. &#60;select name=&#34;sel&#34; id=&#34;selid&#34; multiple&#62;
  7.         &#60;option value=&#34;1&#34;&#62;Opcion1&#60;/option&#62;
  8.         &#60;option value=&#34;2&#34; selected&#62;Opcion2&#60;/option&#62;
  9.         &#60;option value=&#34;3&#34;&#62;Opcion3&#60;/option&#62;
  10.         &#60;option value=&#34;4&#34;&#62;Opcion4&#60;/option&#62;
  11. &#60;/select&#62;
  12. &#60;input type=&#34;button&#34; value=&#34;Mover&#34; onclick=&#34;mover();&#34;&#62;
  13. &#60;/form&#62;
  14.  
  15.  
  16. &#60;script type=&#34;text/javascript&#34;&#62;
  17. osel = document.getElementById(&#34;selid&#34;);
  18.  
  19. function mover(){
  20.  
  21.    for(i=0; i &#60; osel.options.length; i++)
  22.       if(osel.options[i].selected){
  23.          desseleccionar(i);
  24.          if(i == osel.options.length - 1)
  25.             osel.options[0].selected = true;
  26.          else
  27.             osel.options[i + 1].selected = true;
  28.          break;
  29.       }
  30. }
  31.  
  32. function desseleccionar(idx){
  33.    osel.options[idx].selected = false;
  34. }
  35.  
  36. &#60;/script&#62;
  37. &#60;/body&#62;
  38. &#60;/html&#62;
  39.  
  40.  

En este caso, cuando llega al fin vuelve al inicio, ¿o lo pensabas hacer con dos botones?

Cualquier duda avisá.

Saludos.