仿Select实现带图标的下拉框
2020-08-12 15:30
78 查看
效果图
html
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项带图片的"下拉框"（模拟select）</title>
<!--1.引入customSelect自带的样式表-->
<link rel="stylesheet" href="css/customSelect.jquery.css">
<!--2.写自己定制的样式：选择器优先级相同时，后写的样式覆盖自带的customSelect.jquery.css中的样式-->
<style>
/*container: 包裹下拉框的div的样式*/
.my-container-css{
width:300px;
}
/*header: 下拉框头部的样式*/
.my-header-css{
font-family: Arial,'楷体';
font-weight: bold;
border-radius:5px;
}
/*options: 包裹所有下拉选项的div的样式*/
.my-options-css{
}
/*option: 每一个下拉选项的样式*/
.my-option-css{
height:40px;
line-height:40px; /*行高和高度相同时，文字有垂直居中效果*/
background-repeat:no-repeat;
background-size:35px 35px; /*背景图片的大小*/
background-position:5px center; /*背景图片显示的位置：左侧留出5px，垂直居中*/
padding-left:50px; /*文字左侧留出50px的位置，避免文字挡住背景图片*/
}
</style>
<!--3.引入JQuery-->
<script src="js/jquery-1.11.0.min.js"></script>
<!--4.引入customSelect的js-->
<script src="js/customSelect.jquery.js"></script>
</head>
<body>
<!--Step 1: 使用<input>元素作为生成下拉框的基点，也用于保存选中的项-->
<input type="hidden" id="basePoint" value="">
<script type="text/javascript">
/*Step 2: 配置数据源：二维数组*/
var dataSource = [
/* $0:背景图片url、 $1:显示文字text、 $2:值value*/
['images/chrome.png', '谷歌', 'chrome'],
['images/firefox.png', '火狐', 'firefox'],
['images/ie.png', 'IE', 'ie'],
['images/360.png', '360', '360'],
['images/欧朋.png', '欧朋', 'opera'],
['images/QQ浏览器.png', 'QQ浏览器', 'qq'],
['images/猎豹.png', '猎豹', '猎豹'],
['images/搜狗.png', '搜狗', '搜狗'],
['images/世界之窗.png', '世界之窗', '世界之窗']
];
/*Step 3: 下拉选项模板：可以在这里设置每一个下拉选项的样式。$理解为占位符*/
var myTemplate = "<div class='jqcs_option my-option-css' data-select-value='$2' style='background-image: url($0);'>$1</div>";
/*Step 4: 将基点、数据源和下拉选项模板配置到高仿select中*/
$.customSelect({
identifier: 'browserSelector', /*给高仿的select起个id，避免冲突*/
basePoint: '#basePoint', /*基点：在它的后面生成高仿的select*/
placeholder: '请选择你喜欢的浏览器', /*提示信息*/
dataSource: dataSource, /*数据源*/
template: myTemplate, /*下拉选项模板*/
containerCssClass: 'my-container-css',
headerCssClass: 'my-header-css', /*指定类选择器，给高仿select的header部分设置样式*/
optionsCssClass: 'my-options-css'/*选项容器的样式（里面存放的是所有的下拉选项）*/
});
</script>
</body>
</html>
css
[code].jqcs_container{
width:100%;
display:inline-block;
}
.jqcs_select{
position:relative;
border:1px #b1b1b1 solid;
cursor:pointer;
overflow:hidden; /*解决因浮动元素导致的坍塌问题*/
color:#555;
}
.jqcs_select:hover{
background-color:#f9f9f9;
}
.jqcs_select .jqcs_value{
float:left;
padding:5px 5px; /*上下、左右*/
}
.jqcs_select .jqcs_value p.jqcs_placeholder{
margin:0;
padding:4px 0px;
}
.jqcs_select .jqcs_arrow{
position:absolute;
right:0;
height:100%;
border-left:1px #b1b1b1 solid;
background-image: url(../images/arrow_down.png); /*高仿select右侧的箭头小图标*/
background-size: 75%;
background-repeat: no-repeat;
background-position: center center; /*水平、垂直居中显示*/
}
.jqcs_select .jqcs_arrow.rotated{ /*箭头的转向：向上*/
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
border-left:0 !important;
border-right:1px #b1b1b1 solid !important;
}
.jqcs_options{
display:none; /*一开始是隐藏的*/
border:1px #b1b1b1 solid;
border-top:0;
}
.jqcs_option{
cursor:pointer; /*鼠标悬停在选项上时，变成小手*/
}
.jqcs_option:hover{
background-color:#f9f9f9;
}
js
[code];(function( $ ){
$.customSelect = function(options){
/*如果没有指定下拉框的标识符，则随机生成*/
if(typeof options.identifier === "undefined" || options.identifier == ""){
options.identifier = Math.floor((Math.random() * 100000000));
}
/*在input标签后生成用于模拟select的div*/
$(options.basePoint).after(
"<div class='jqcs_container "+options.containerCssClass+"'>"+
/*高仿select的header部分*/
"<div id='jqcs_s_"+options.identifier+
"' class='jqcs_select "+options.headerCssClass+"'>"+ /*通过配置headerCssClass参数给header部分设置样式*/
"<div class='jqcs_value'><p class='jqcs_placeholder'>"+options.placeholder+"</p></div>"+
"<div class='jqcs_arrow'></div>"+ /*右侧的小箭头图标*/
"</div>"+
/*高仿select的下拉选项部分（容器，用于存放所有下拉选项）*/
"<div id='jqcs_o_"+options.identifier+"' class='jqcs_options "+options.optionsCssClass+"'></div>"+
"</div>"
);
/*将小箭头的宽度设置为下拉框的高度*/
$('#jqcs_s_'+options.identifier+' .jqcs_arrow').width($('#jqcs_s_'+options.identifier).height());
/*处理用户配置的数据源*/
for(var i = 0; i < options.dataSource.length; i++){
var currenthtml = $('#jqcs_o_'+options.identifier).html();
var template = options.template; /*每一个下拉选项*/
/*将数据源中的数据填到下拉选项的占位符中*/
for(var j = 0; j < options.dataSource[i].length; j++){
var regex = new RegExp("\\$"+j, "g");
template = template.replace(regex, options.dataSource[i][j]);
}
// 追加template
$('#jqcs_o_'+options.identifier).html(currenthtml + template);
}
/*点击下拉框时，显示or隐藏，小箭头的变化*/
$('#jqcs_s_'+options.identifier).click(function(e){
e.stopPropagation(); // 阻止事件冒泡
if($('#jqcs_o_'+options.identifier).css('display') == "block"){
$('#jqcs_o_'+options.identifier).slideUp();
$($('#jqcs_s_'+options.identifier+' .jqcs_arrow')[0]).removeClass('rotated');
}else{
$('#jqcs_o_'+options.identifier).slideDown();
$($('#jqcs_s_'+options.identifier+' .jqcs_arrow')[0]).addClass('rotated');
}
});
/*点击选项后，把选项的内容显示在select框中*/
$('#jqcs_o_'+options.identifier+' .jqcs_option').click(function(e){
/*input#basePoint*/
$('input'+options.basePoint)[0].value = $(this).data('select-value');
$($('#jqcs_s_'+options.identifier+' .jqcs_value')[0]).html(this.outerHTML);
});
/*点击背景，收缩下拉框*/
$(window).click(function(e){
$('#jqcs_o_'+options.identifier).slideUp();
$($('#jqcs_s_'+options.identifier+' .jqcs_arrow')[0]).removeClass('rotated');
});
}
})( jQuery );
完整Demo
https://gitee.com/lanying100/CustomSelect
参考网址
JQuery之家：http://www.htmleaf.com/jQuery/Form/201808255296.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery实现Select下拉列表进行状态选择功能
- 简单的用React+antd实现简单Select 下拉多级联动；
- 原生js实现对select下拉列表的内容过滤
- jQuery实现select下拉框左右选择_交换内容
- html select下拉框上显示空的实现方法
- Angularjs实现select的下拉列表
- select的练习，实现一个下拉选择语言
- jQuery实现select下拉框获取当前选中文本、值、索引
- 类似ios select下拉选择框的实现
- 基于jQuery实现select下拉选择可输入附源码下载
- 微信小程序自定义select下拉选项框组件的实现代码
- Select自动下拉实现
- bootstrap 下拉选择框select实现从服务器加载option
- 实现html中select下拉列表中部分选项不可选
- select下拉选择框美化实现代码(js+css+图片)
- js实现下拉框效果（select）
- 使用js实现一个可编辑的select下拉列表
- 可编辑Select下拉列表控件实现方法（非DIV模拟）
- 如何用js实现select下拉框里是树形结构，可复选，select框中传复选所有值？select2tree
- 实现html中select下拉列表中部分选项不可选