<!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>
相关推荐
模拟下拉框select，之前穿过一个，是纯div和li写的，现在这个的本质还是select，虽然没有经过实验，不过应该不用怕开发的时候取不到值这个问题，修改起来也很简单，只要有点css基础的都应该没有问题~
原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...
jquery DIV模拟select,样式美观、大方、可自己更换背景、不懂的私我
类似百度下拉提示 模拟select下拉框 jquery插件 自动提示框 下拉框 本插件依赖于jquery的插件，类似于百度下拉提示框
jQuery模拟select下拉框插件是一款支持多选和单选下拉框菜单选中代码。
divcss模拟select 下拉框 select 改变样式
自己这些天写的一点小东西 用JQuery JS 创建一个模拟下拉框。有单选和多选的。自我感觉还是做的过得去，支持IE和FF其他浏览器没试过
jQuery模拟select下拉框三级城市联动代码.zip
jQuery模拟select下拉框插件是一款支持多选和单选下拉框菜单选中代码。
用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip 用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip 用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip
一款美化得很好看的jQuery模拟select下拉框多选和单选插件，以下拉形式展示，非常的有特色。
selectBox下拉框模拟，有多种样式，可以自己定义修改样式
div+css打造select下拉菜单,可自己修改相应样式!!!
今天小编就为大家分享一篇layui问题之模拟select点击事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一组经过美化的jQuery select下拉框单选和多选插件，带搜索功能，模拟select下拉框多选菜单选择效果。
自动模拟框，并且可以手动输入，可以模糊性查找
完美的select模拟组件，不会影响屏蔽Js的用户的浏览，兼容性好，可以通过传递参数设置select的外观，炫丽效果，一个参数搞定，并且能完整保留原生select的绑定事件