Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/02/2011, 12:45
Avatar de yense
yense
 
Fecha de Ingreso: febrero-2008
Ubicación: Perú Lima
Mensajes: 340
Antigüedad: 17 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