<!doctype html>
<html>
<head><meta charset="gb2312">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
.styledSelect{ position:relative; margin:0 100px 0 0; padding:0; float:left; width:113px; line-height:21px; border:1px solid #000; background:url(selete.png) repeat-x;}
.styledSelect select{ margin:0; padding:0; visibility:hidden; border:none; width:1px; height:1px;}
.styledSelect ul{ margin:0; padding:0; width:113px; list-style:none; border-top:none; display:none;}
li.liClass{ cursor:pointer; padding-left:5px; list-style:none; font-family:'宋体'; font-size:12px; height:21px; line-height:21px;}
.divClass{ cursor:pointer; width:108px; height:21px; padding-left:5px; background:url(selete_bg.png) no-repeat right top;}
.liHover{ background:#E1E1E1!important;}
.liSelected{ background:#AEAEAE;}
</style>
</head>
<body>
<div class="styledSelect">
<select id="brand" name="brand">
<option value="0">选择品牌</option>
<option value="1">Cisio</option>
<option value="2">太平鸟</option>
<option value="3">比起</option>
</select>
</div>
<div class="styledSelect">
<select id="sort" name="sort">
<option value="0">选择品类</option>
<option value="1">男装</option>
<option value="2">女装</option>
</select>
</div>
</body>
</script>
<script>
<html>
<head><meta charset="gb2312">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
.styledSelect{ position:relative; margin:0 100px 0 0; padding:0; float:left; width:113px; line-height:21px; border:1px solid #000; background:url(selete.png) repeat-x;}
.styledSelect select{ margin:0; padding:0; visibility:hidden; border:none; width:1px; height:1px;}
.styledSelect ul{ margin:0; padding:0; width:113px; list-style:none; border-top:none; display:none;}
li.liClass{ cursor:pointer; padding-left:5px; list-style:none; font-family:'宋体'; font-size:12px; height:21px; line-height:21px;}
.divClass{ cursor:pointer; width:108px; height:21px; padding-left:5px; background:url(selete_bg.png) no-repeat right top;}
.liHover{ background:#E1E1E1!important;}
.liSelected{ background:#AEAEAE;}
</style>
</head>
<body>
<div class="styledSelect">
<select id="brand" name="brand">
<option value="0">选择品牌</option>
<option value="1">Cisio</option>
<option value="2">太平鸟</option>
<option value="3">比起</option>
</select>
</div>
<div class="styledSelect">
<select id="sort" name="sort">
<option value="0">选择品类</option>
<option value="1">男装</option>
<option value="2">女装</option>
</select>
</div>
</body>
</script>
<script>
// ie6,ie7,ie8,ff,opera中测试可用
//made by keimon
// 设置元素样式
function setStyle(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
}
//模拟下拉框,select;
function selectModel(brand){
var parentDiv = brand.get(0).parentNode;
var selectId = brand.attr('id');
var ul = document.createElement('ul');
$(ul).attr('id',('ul'+selectId));
parentDiv.appendChild(ul);
var optionLen = brand.find('option').length;
for(var i=0; i<optionLen; i++){
var li = document.createElement('li') ;
ul.appendChild(li);
$(li).addClass('liClass');
$(li).html(brand.find('option').get(i).text)
}
var div1 = document.createElement('div');
$(div1).attr('id',('div'+selectId));
$(div1).html(brand.find('option').get(0).text);
divStyle={
fontSize: '12px',
position: 'absolute',
left: '0px',
top: '0px'
};
parentDiv.appendChild(div1);
setStyle(div1, divStyle);
$(div1).addClass('divClass');
$('body').click(function(event){
var target = event.target;
var targetName = target.nodeName;
if(event.target.id== $(div1).attr('id')){
for(var i=0; i<optionLen; i++){
if($(ul).find('li').eq(i).html()==$(div1).html()){
$(ul).find('li').removeClass('liSelected').eq(i).addClass('liSelected');
}
}
$(ul).css('display','block');
}else if(event.target.parentNode.id.toLowerCase()=='ul'+selectId){
if(event.target.nodeName== 'LI'){
$(div1).html(event.target.innerHTML)
}
$(ul).css('display','none');
}
})
$(ul).find('li').mouseenter(function(){
$(ul).find('li').removeClass('liHover');
$(this).addClass('liHover');
})
}
//实例化
var brand = $('#brand');
selectModel(brand);
var sort1 = $('#sort');
selectModel(sort1);
</script>
</html>
function setStyle(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
}
//模拟下拉框,select;
function selectModel(brand){
var parentDiv = brand.get(0).parentNode;
var selectId = brand.attr('id');
var ul = document.createElement('ul');
$(ul).attr('id',('ul'+selectId));
parentDiv.appendChild(ul);
var optionLen = brand.find('option').length;
for(var i=0; i<optionLen; i++){
var li = document.createElement('li') ;
ul.appendChild(li);
$(li).addClass('liClass');
$(li).html(brand.find('option').get(i).text)
}
var div1 = document.createElement('div');
$(div1).attr('id',('div'+selectId));
$(div1).html(brand.find('option').get(0).text);
divStyle={
fontSize: '12px',
position: 'absolute',
left: '0px',
top: '0px'
};
parentDiv.appendChild(div1);
setStyle(div1, divStyle);
$(div1).addClass('divClass');
$('body').click(function(event){
var target = event.target;
var targetName = target.nodeName;
if(event.target.id== $(div1).attr('id')){
for(var i=0; i<optionLen; i++){
if($(ul).find('li').eq(i).html()==$(div1).html()){
$(ul).find('li').removeClass('liSelected').eq(i).addClass('liSelected');
}
}
$(ul).css('display','block');
}else if(event.target.parentNode.id.toLowerCase()=='ul'+selectId){
if(event.target.nodeName== 'LI'){
$(div1).html(event.target.innerHTML)
}
$(ul).css('display','none');
}
})
$(ul).find('li').mouseenter(function(){
$(ul).find('li').removeClass('liHover');
$(this).addClass('liHover');
})
}
//实例化
var brand = $('#brand');
selectModel(brand);
var sort1 = $('#sort');
selectModel(sort1);
</script>
</html>