div伪装select下拉列表

最新推荐文章于 2022-05-21 10:50:42 发布

啦啦噜啦啦

最新推荐文章于 2022-05-21 10:50:42 发布

阅读量1.6w

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/liu__hua/article/details/38684227

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图：

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style>
*{ margin:0; padding:0;}
select{display: none; height:30px; overflow:hidden;border:1px solid #e2e2e2;}
.select_box{color: #999;width: 180px;line-height:30px; margin-top:48px; float:left; height:30px; margin-left:400px; position:relative; }
.select_showbox{border: 1px solid #e2e2e2;height:30px;padding-left: 5px;background:url(select_btn.jpg) no-repeat 90% 10px;}
.select_option{border: 1px solid #e2e2e2;border-top: none;display: none; position:absolute; top:32px; left:0; width:178px; height:170px;background-color:#fff; overflow: auto;}
.select_option li{ background:#fff;height:30px; line-height: 30px; list-style: none; }
.select_option li.selected{background-color:#e2e2e2;color: #000;}
.select_option li.hover{background: #80B6E6; color: #fff;}
</style>
</head>
<body>
<form action="" method="post" id="formid" name="form1">
<div>
<select name="choose" id="choose">
<option value="" selected="selected">请选择</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><br />
</div>
</form>
<script type="text/javascript">
(function($){
var selects=$('select');//获取select
for(var i=0;i<selects.length;i++){
createSelect(selects[i],i);
}
function createSelect(select_container,index){

//创建select容器，class为select_box，插入到select标签前
var tag_select=$('<div></div>');//div相当于select标签
tag_select.attr('class','select_box');
if(i==1)
{
tag_select.css("z-index","2000");
}
tag_select.insertBefore(select_container);

//显示框class为select_showbox,插入到创建的tag_select中
var select_showbox=$('<div></div>');//显示框
select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);

//创建option容器，class为select_option，插入到创建的tag_select中
var ul_option=$('<ul></ul>');//创建option列表
ul_option.attr('class','select_option');
ul_option.appendTo(tag_select);
createOptions(index,ul_option);//创建option

//点击显示框
tag_select.toggle(function(){
ul_option.show();
},function(){
ul_option.hide();
});

tag_select.hover(function(){
},function(){
ul_option.hide();
});

var li_option=ul_option.find('li');
li_option.on('click',function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).text();
select_showbox.text(value);
ul_option.hide();
});

li_option.hover(function(){
$(this).addClass('hover').siblings().removeClass('hover');
},function(){
li_option.removeClass('hover');
});

}
function createOptions(index,ul_list){
//获取被选中的元素并将其值赋值到显示框中
var options=selects.eq(index).find('option'),
selected_option=options.filter(':selected'),
selected_index=selected_option.index(),
showbox=ul_list.prev();
showbox.text(selected_option.text());

//为每个option建立个li并赋值
for(var n=0;n<options.length;n++){
var tag_option=$('<li></li>'),//li相当于option
txt_option=options.eq(n).text();
tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);

//为被选中的元素添加class为selected
if(n==selected_index){
tag_option.attr('class','selected');
}
}
}

})(jQuery)
</script>
</body>
</html>

可能遇见问题：

form表单会获取select值但是我们把select隐藏掉之后提交表单不能获取选择值。需要加一个

去掉button的type="submit"属性，添加onclick事件

提交表单之前给id赋值$("#style").val($('.select_option:eq(0) li.selected').val());或者

$("#style").val($('.select_option:eq(0) li.selected').attr('value'));

啦啦噜啦啦

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
div伪装select下拉列表

html:select美化自定义下拉框样式 - 站长素材*{margin:0;padding:0;}select{outline:none;}ul{list-style:none;}a{text-decoration:none;}select{display: none;}.select_box{font-family: "宋体"; font
复制链接

扫一扫

专栏目录