• Viernes 8 de Noviembre de 2024, 20:39
« anterior próximo »
Páginas: [1]

Autor Tema:  Cambiar select index en un Combobox  (Leído 8834 veces)

Fundacional

  • Nuevo Miembro
  • *
  • Mensajes: 2
    • Ver Perfil
Cambiar select index en un Combobox
« en: Miércoles 12 de Mayo de 2010, 20:48 »
0
Hola buenas tengo un problema, en mi codigo de ASP.Net tengo un combobox, con todos los Usos horarios cargados, el caso es que en la aplicación al ser destinada para un dispositivo tactil, es complicado navegar por la barra de desplazamiento del combo. Como la barra no se puede aumentar de tamaño (por lo menos yo no he encontrado ninguna manera), tengo que poner un par de botones, uno Up y otro Down, asi cuando se pulse el boton Up, el objeto seleccionado en el combo sea el anterior al actual, y cuando se pulse Down, se seleccione el posterior al actual. Necesito hacer esta operación a traves de javascript para que no se me recargue la pagina. Habia pensado en quitar el combo y poner una lista pero me han dejado claro que debo dejar las dos opciones el combo y los botones.

Un saludo y gracias de antemano.

Ryusaki N

  • Miembro activo
  • **
  • Mensajes: 76
    • Ver Perfil
Re: Cambiar select index en un Combobox
« Respuesta #1 en: Viernes 14 de Mayo de 2010, 22:31 »
0
Hola, bueno probablemente este codigo te sirva, aclaro que no tiene nada de ASP es puro HTML pero lo que importa a fin de cuentas es el JS.
Código: Text
  1.  <html>
  2.  <head>
  3.  <title>Prueba</title>
  4.  <script language = "javascript" src = "c.js"></script>
  5.  </head>
  6.  
  7. <body>
  8.  <form name = "combo_box">
  9.   <select name = "opciones">
  10.     <option value = "uno">opcion1</option>
  11.     <option value  = "dos">opcion2</option>
  12.     <option value = "tres">opcion3</option>
  13.   </select>
  14.   <input type = "button" value = "up" id = "up" onclick = "u();"/>
  15.   <input type = "button" value = "Down" id = "down" onlcick = "d();"/>
  16.  </form>
  17. </body>
  18. </html>
  19.  

Código: Text
  1.  function u(){
  2.  
  3.   var x =  document.combo_box.opciones.selectedIndex;
  4.  
  5.      if(x != 0){
  6.  
  7.         x = x-1;
  8.        
  9.  
  10.      }
  11.  
  12.  }
  13.  
  14.  function d(){
  15.  
  16.    
  17.   var x =  document.combo_box.opciones.selectedIndex;
  18.  
  19.    if(x != 2){
  20.  
  21.       x = x+1;
  22.  
  23.     }
  24. }
  25.  
  26.  

Como ves estoy empleando el selectIndex disponible en cualquier form de tipo select, este método devuelve el valor elegido dentro de lo que seria tu combo box, luego de hacer una pequeña evaluación con el numero mínimo y máximo de tu lista de opciones incrementas o decrementas el indice. Espero sirva.

Saludos.
C/C++/C#/Java/Python dev. Frontend web developer. ASP.NET && PHP, ASM x86
No tengo vida social y me siento orgulloso!! 1000% Geek.

Fundacional

  • Nuevo Miembro
  • *
  • Mensajes: 2
    • Ver Perfil
Re: Cambiar select index en un Combobox
« Respuesta #2 en: Miércoles 19 de Mayo de 2010, 21:18 »
0
No funciona, cambio los nombres por los de la pagina de Html que se genera a partir de mi ASP, no consigo hacer que funcione, cada vez que le doy a los botones, el javasript falla y se recarga la pagina.

¿que debo poner solo el nombre del form y el del select? ¿ o tengo que poner toda la ruta desde el form hasta el select?

He utilizado este trozo de codigo:
Código: Text
  1.  
  2. function IndexUp()
  3.     {
  4.         var selObj = document.getElementById('ddlUsosHorarios');
  5.         var selIndex = selObj.selectedindex
  6.  
  7.         if(selIndex != 0){
  8.             selIndex = selIndex-1;
  9.         }
  10.         selObj.selectedIndex = selIndex;
  11.         document.getElementById('ddlUsosHorarios') = selObj;
  12.     }
  13.  
  14.  

Pero no funciona, ¿a alguien se le ocurre un arreglo?
Un saludo

P.D. Si alguien me supiera decir que estoy haciendo mal, se lo agradeceria.

fonsi3

  • Miembro activo
  • **
  • Mensajes: 95
    • Ver Perfil
Re: Cambiar select index en un Combobox
« Respuesta #3 en: Jueves 20 de Mayo de 2010, 00:26 »
0
Aqui tienes amigacho!:

Código: Text
  1. (function() {
  2.         var comboBox = document.getElementById( 'husosHorarios' );
  3.         var btnUp = document.getElementById( 'subir' );
  4.         var btnDown = document.getElementById( 'bajar' );      
  5.         var lenComboBox = comboBox.length - 1;
  6.        
  7.         btnDown.onclick = function() {
  8.             if( comboBox.selectedIndex !== lenComboBox ) {
  9.                 comboBox.selectedIndex = comboBox.selectedIndex + 1;
  10.             } else {
  11.                 comboBox.selectedIndex = 0;
  12.             }
  13.         };
  14.        
  15.         btnUp.onclick = function() {
  16.             if( comboBox.selectedIndex !== 0 ) {
  17.                 comboBox.selectedIndex = comboBox.selectedIndex - 1;
  18.             } else {
  19.                 comboBox.selectedIndex = lenComboBox;
  20.             }
  21.         };     
  22.     })();
  23.  
y lo he probado con el siguiente codigo:
Código: Text
  1. <html>
  2.     <head>
  3.         <style>
  4.             select {
  5.                 font: bold 12px Tahoma;
  6.                 color: DarkBlue;
  7.                 border: 1px solid LightSteelBlue ;
  8.                 padding: 2px;
  9.                 color: DarkSlateGray;
  10.             }
  11.             option {
  12.                 padding: 2px;
  13.             }
  14.             div#btn {
  15.                 margin-top: 5px;               
  16.             }
  17.             div#btn > input {
  18.                 background-color: LightGrey ;
  19.                 border: none;
  20.                 padding: 2px;
  21.                 font: bold 12px Arial;
  22.                 width: 70px;
  23.                 -moz-border-radius: 5px;
  24.                 color: white;
  25.             }
  26.             div#btn > input:hover {
  27.                 -moz-box-shadow: 0px 0px 2px gray;
  28.                 cursor: pointer;
  29.             }
  30.         </style>
  31.     </head>
  32.     <body>
  33.         <select name="husosHorarios" id="husosHorarios">
  34.             <option>Alpha Time Zone</option>
  35.             <option>Australian Central Daylight Time</option>
  36.             <option>Australian Central Standard Time</option>
  37.             <option>Atlantic Daylight Time</option>
  38.             <option>Australian Eastern Daylight Time or Australian Eastern Summer Time</option>
  39.             <option>Australian Eastern Standard Time</option>
  40.             <option>Alaska Daylight Time</option>
  41.             <option>Alaska Standard Time</option>
  42.             <option>Atlantic Standard Time</option>
  43.             <option>Australian Western Daylight Time</option>
  44.             <option>Australian Western Standard Time</option>
  45.         </select>
  46.         <div id="btn">
  47.             <input type="button" name="bajar" id="bajar" value="Bajar">
  48.             <input type="button" name="subir" id="subir" value="Subir">
  49.         </div>
  50.     </body>
  51. </html>
  52. <script>
  53. // PEGA AQUI EL CODIGO JAVASCRIPT, ASI NO DEPENDES DEL WINDOW.ONLOAD
  54. </script>
  55.  
  56.  

cha che chi cho chu buenichimo!
Cha che chi cho chu buenichimo!
http://mensoscripts.com

Links de interes: HTML | CCS2~CSS* | PHP
Indispensables tools]Firebug[/url] | Web Developer | FireFTP | Live Headers
Páginas: [1]
« anterior próximo »