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#ComboBox1{
margin:-5px 0 0 0;
width:250px;
height:25px;
background-color:#f1f1f1;
background-image:url(../web/imgs/select.png);
background-repeat:no-repeat;
background-position:right;
border:1px solid #999;
}
.cont_option{
position:relative;
}
.cont_option td{
width:50%;
}
.nove{
display:none;
}
.fondoselect{
background-color:#f1f1f1;
overflow:auto;
height:150px;
}
javascript
:
Código Javascript
:
Ver original$(document).ready(function(){
var esto;
$("#ComboBox1").toggle(function(){
$("#ComboBox1 tr").removeClass("nove");
$(".cont_option").addClass("fondoselect");
//$(".cont_option").css("position":"absolute","left":"1px","top":"1px","overflow":"scroll");
},function(){
$("#ComboBox1 tr").addClass("nove");
esto.removeClass("nove");
$(".cont_option").removeClass("fondoselect");
});
$("#ComboBox1 tr").click(function(){
$("#combobox1").val($(this).attr("id"));
dev($(this));
});
$("#ComboBox1 tr:first").removeClass("nove");
$("#mos").click(function(){
alert($("#combobox1").val()+" - "+$("#algo").val());
});
function dev(val){
esto = val
}
});
html:
Código HTML:
Ver original
<div class="cont_option"> <tr id="1" class="nove"><td>banco1
</td><td>124521545
</td></tr> <tr id="2" class="nove"><td>banco1502
</td><td>1245425
</td></tr> <tr id="3" class="nove"><td>banco454
</td><td>789454565454
</td></tr> <tr id="4" class="nove"><td>continental
</td><td>123456789102
</td></tr> <tr id="5" class="nove"><td>scotibank
</td><td>963245754
</td></tr> <tr id="6" class="nove"><td>nacion
</td><td>8521475554
</td></tr> <tr id="7" class="nove"><td>aleman
</td><td>123456789
</td></tr> <input type="hidden" id="combobox1" />