Foros del Web » Programando para Internet » Jquery »

simulación select con jquery

Estas en el tema de simulación select con jquery en el foro de Jquery en Foros del Web. Simulación de un select haciendo uso de una tabla para que la palabra de la primera columna estén todos alineados como también en la segunda ...
  #1 (permalink)  
Antiguo 17/02/2011, 12:45
Avatar de yense  
Fecha de Ingreso: febrero-2008
Ubicación: Perú Lima
Mensajes: 340
Antigüedad: 16 años, 2 meses
Puntos: 3
De acuerdo simulación select con jquery

Simulación de un select haciendo uso de una tabla para que la palabra de la primera columna estén todos alineados como también en la segunda columna

Bueno les dejo el código haber si se dan un tiempo y bueno lo mejoren

css:
Código CSS:
Ver original
  1. #ComboBox1{
  2.     margin:-5px 0 0 0;
  3.     width:250px;
  4.     height:25px;
  5.     background-color:#f1f1f1;
  6.     background-image:url(../web/imgs/select.png);
  7.     background-repeat:no-repeat;
  8.     background-position:right;
  9.     border:1px solid #999;
  10. }
  11. .cont_option{
  12.     position:relative;
  13. }
  14. .cont_option td{
  15.     width:50%;
  16. }
  17. .nove{
  18.     display:none;
  19. }
  20. .fondoselect{
  21.     background-color:#f1f1f1;
  22.     overflow:auto;
  23.     height:150px;
  24. }

javascript:
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.         var esto;                  
  3.    
  4.    
  5.     $("#ComboBox1").toggle(function(){
  6.        
  7.         $("#ComboBox1 tr").removeClass("nove");
  8.         $(".cont_option").addClass("fondoselect");
  9.         //$(".cont_option").css("position":"absolute","left":"1px","top":"1px","overflow":"scroll");    
  10.     },function(){    
  11.  
  12.             $("#ComboBox1 tr").addClass("nove");
  13.             esto.removeClass("nove");
  14.  
  15.             $(".cont_option").removeClass("fondoselect");
  16.  
  17.     });
  18.    
  19.     $("#ComboBox1 tr").click(function(){
  20.         $("#combobox1").val($(this).attr("id"));
  21.         dev($(this));
  22.     });
  23.    
  24.     $("#ComboBox1 tr:first").removeClass("nove");
  25.     $("#mos").click(function(){
  26.         alert($("#combobox1").val()+" - "+$("#algo").val());
  27.     });
  28.    
  29.     function dev(val){
  30.         esto = val
  31.     }
  32.    
  33. });

html:
Código HTML:
Ver original
  1.     <tr><td>seleccion:</td><td>
  2.      
  3.   <div id="ComboBox1">
  4.   <div class="cont_option">
  5.     <table>
  6.       <tr id="1" class="nove"><td>banco1</td><td>124521545</td></tr>
  7.       <tr id="2" class="nove"><td>banco1502</td><td>1245425</td></tr>
  8.       <tr id="3" class="nove"><td>banco454</td><td>789454565454</td></tr>
  9.       <tr id="4" class="nove"><td>continental</td><td>123456789102</td></tr>
  10.       <tr id="5" class="nove"><td>scotibank</td><td>963245754</td></tr>
  11.       <tr id="6" class="nove"><td>nacion</td><td>8521475554</td></tr>
  12.       <tr id="7" class="nove"><td>aleman</td><td>123456789</td></tr>
  13.     </table>
  14.     <input type="hidden" id="combobox1" />
  15.   </div>
  16.   </div>      
  17.       </td></tr>
  18.     <tr><td>ingrese</td><td><input id="algo" /></td></tr>
  19.     <tr><td colspan="2" align="center"><button id="mos">Mostrar</button></td></tr>
  20.   </table>
__________________
©® -> Conocer algo mas es dar un paso mas <- ®©

Última edición por yense; 17/02/2011 a las 14:19

Etiquetas: ajax, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:17.