Hola
Como muchos conoceis, dar estilo a un select y que funciones en IE y en FF es una labor dificil.
Con jquery se puede conseguir "transformar" el select a un ul con sus li, y darle el estilo deseado. Y asi lo hice.
Podeis ver una prueba funcionando en
http://www.leunam.com/soporte/select/prselect22.html
Pero quiero hacer dos cambios y no se como realizarlo (mi jquery no es demasiado bueno):
1 - que el desplegable aparezca al clicar en "Seleccione un Talla", en lugar de que aparezca al pasar sobre él.
2 - que al clicar en el dato elegido (una talla) se cierre el desplegable, en lugar de que se cierre cuando quitamos el cursor del desplegable.
Vamos, que funcione igual que un select.
Alguien me puede echar una mano ¿?.
Gracias y un saludo
El codigo empleado es el siguiente:
*********** CSS
ul.plainSelect {
margin:0;
padding:0;
border: 1px solid #000;
list-style:none;
width:301px;
}
ul.plainSelect li {
background-color: pink;
display: list-item;
height: 3em;
border:1px solid #ccc;
border-top-width: 0;
text-indent: 1em;
cursor:pointer;
}
ul.plainSelect li.guidance {
padding: 0.3em;
font-weight: bold;
font-size: 1.2em;
background-color: #fff;
}
ul.plainSelect li.unselected {
background-color: orange;
display: none;
}
ul.plainSelect:hover li.unselected {
display: list-item;
}
ul.plainSelect li.unselected:hover {
background-color: yellow;
}
******* SCRIPT
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript">
(function($) {
$.fn.selectUl = function(){
var $origSelect = $(this);
var newId = $(this).attr('name') + '-ul';
var numOptions = $(this).children().length;
$('<ul id="' + newId + '" class="plainSelect" />')
.insertAfter($(this));
$('<li class="guidance" />')
.text($(this).attr('title'))
.appendTo('#' + newId);
for (var i = 0; i < numOptions; i++) {
var text = $(this).find('option').eq(i).text();
$('<li />').text(text).appendTo('#' + newId);
}
if ($(this).find('option:selected')) {
var selected = $(this).find('option:selected').index();
$('#' + newId)
.find('li')
.not(':eq(' + selected + 0 + '), .guidance') //originalmente era un 1 y daba error en IE, si quito el +1 da error en FF y curiosamente con el +0 no da error ni en FF ni IE. SI lo quito, da error.
.addClass('unselected');
}
$('#' + newId + ' li')
.hover(
function(){
$(this).click(
function(){
var newSelect = $(this).index() - 1;
$(this)
.parent()
.find('.unselected')
.removeClass('unselected');
$(this)
.parent()
.find('li')
.not(this)
//.not('.guidance') //evito que este siempre el Seleccione talla
.addClass('unselected');
$($origSelect)
.find('option:selected')
.removeAttr('selected');
$($origSelect)
.find('option:eq(' + newSelect +')')
.attr('selected',true);
});
},
function(){
});
// para no ver el select visible
$(this).hide();
return $(this);
}
})(jQuery);
</script>
**** HTML
<body>
<select name="sizes" id="sizes" class="makePlain" title="Select a size:">
<option value="xxs">XX-Small</option>
<option value="xs">X-Small</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
<option value="xl">X-Large</option>
<option value="xxl">XX-Large</option>
</select>
<script type="text/javascript">
$('.makePlain').selectUl();
</script>
</body>
