CSS
div.selectbox {
display: inline-block;
*display: inline;
zoom: 1;
position: relative;
}
div.selectbox a.select {
border: solid #ddd 1px;
display: inline-block;
*display: inline;
zoom: 1;
width: 170px;
color: #262626;
text-decoration: none;
cursor: default;
}
div.selectbox a.select span {
padding: 0 22px 0 7px;
display: block;
height: 22px;
background: url(img/icon_select.gif) no-repeat right 0;
line-height: 22px;
cursor: default;
}
div.selectbox a.select:hover span { background-position: right -21px }
div.selectbox a.select_focus span { background-position: right -42px !important }
div.selectbox div.pulldown {
border: solid #bbb 1px;
width: 170px;
max-height: 150px;
position: absolute;
left: 0;
top: 28px;
background: #fff;
overflow: auto;
}
div.selectbox div.pulldown a {
border-bottom: solid #bbb 1px;
padding: 5px 8px;
display: block;
}
div.selectbox div.pulldown a.last-child {
border: none;
}
div.selectbox div.pulldown a:hover,
div.selectbox div.pulldown a.selected {
color: #666;
background: #eee;
text-decoration: none;
}
Script
jQuery(function($){
$('div.selectbox').each(function(){
var self = $(this);
var select = $('a.select',self);
var pulldown = $('div.pulldown',self);
var select_value = $('span',select);
pulldown.hide().children(':last-child').addClass('last-child');
select.click(function(){
$('div.pulldown').hide();
pulldown.show();
$(this).addClass('select_focus');
return false;
});
$('a',pulldown).click(function(){
var value = $(this).attr('href').replace('#',''); // 1
var text = $(this).text(); // 2
select_value.text(text); // 3
$('a.selected',pulldown).removeClass('selected'); // 4
$('a.select_focus').removeClass('select_focus'); // 5
$(this).addClass('selected'); // 6
pulldown.hide(); // 7
return false;
});
});
});
Demo