共计 9302 个字符，预计需要花费 24 分钟才能阅读完成。
1. Html jquery 下拉 select 美化插件——selectFilter.js
jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理、动画以及 Ajax 交互，使得开发者能更高效地构建交互式网页。在本案例中，jquery.selectlist.js插件正是基于 jQuery 构建的，旨在提供一种优雅的方式来增强下拉框的视觉效果。
在网页设计中，下拉选择框是常见的用户交互元素，但其默认样式往往较为单调，不能满足现代网页的美观需求。为了解决这个问题，开发者们创建了各种各样的下拉选择框美化插件，其中 selectFilter.js 便是其中之一。这个插件不仅能够美化下拉选择框，还支持常用的事件处理，提升了用户体验。
下拉框（Select List）作为常见的交互元素，其外观和用户体验往往直接影响到网站的整体质感。然而，HTML 原生的下拉框样式较为单一，难以满足现代网页设计的需求。为此，开发者们通常会借助于 jQuery 等 JavaScript 库来实现下拉框的美化和功能增强。本篇将详细介绍一款名为“jquery.selectlist.js”的插件，该插件能够轻松地为下拉框添加各种美观的特效。插件的核心功能在于将传统的 HTML 元素转换为具有自定义样式的可交互控件。它提供了丰富的定制选项，包括但不限于字体、颜色、背景、边框等，使得下拉框不仅在视觉上更加吸引人，同时也能更好地融入到网页的整体设计中。
jquery.selectlist.js插件为开发者提供了一种简单且强大的方式来美化和优化网页中的下拉框元素。通过深入理解插件的工作原理和使用方法，我们可以将其灵活运用到实际项目中，提升网站的交互性和美观度。而对于有编程基础的开发者来说，进一步对插件源码进行二次开发，可以创造出更多个性化的下拉框特效，满足更复杂的需求。
1.1. 流程
在实际应用中，jquery.selectlist.js插件的使用流程通常是这样的：
（1）确保在页面中引入了 jQuery 库和 jquery.selectlist.js 插件文件。根据提供的压缩包文件名，我们可以看到有三个主要文件：index.html、css和 js。其中，index.html 是示例页面，css目录可能包含了插件的样式文件，而 js 目录则包含插件的 JavaScript 代码。
（2）在 HTML 中，我们需要一个或多个 元素，这些元素将会被插件转换。每个 元素可以包含多个 ，用于展示不同的选择项。
（3）接着，在文档加载完成后，通过调用 jQuery 的选择器和插件方法，例如$('select').selectlist();，将选中的 元素应用插件效果。
（4）如果需要自定义样式或功能，可以通过插件提供的配置选项进行设置。比如，你可以改变默认的下拉箭头图标，调整选中项的高亮样式，甚至添加自定义事件处理函数。
（5）为了实现更好的用户体验，jquery.selectlist.js插件可能还支持触屏设备的交互，使下拉框在手机或平板电脑上也能流畅操作。
1.2. 主要功能
（1）样式美化 ：该插件能够将传统的 HTML 元素转换为具有现代感和自定义样式的组件。它可以改变下拉箭头的样式，调整选项的文字颜色、背景色等，使得整体风格与网站设计更加协调。
（2）过滤功能 ：selectFilter.js 提供了搜索过滤功能，允许用户在下拉选项中输入关键词，快速定位到所需选项，大大提高了选择效率。
（3）事件处理 ：插件支持多种事件，如change（选中项改变）、focus（获取焦点）、blur（失去焦点）等，开发者可以方便地绑定自定义函数，实现更丰富的交互逻辑。
（4） 可定制性 ：selectFilter.js 允许开发者自定义多项设置，包括但不限于主题颜色、字体大小、搜索框样式等，以适应不同场景的需求。
在使用 selectFilter.js 时，我们通常会配合 HTML、CSS 和 JavaScript 来完成界面的构建。index.html是主页面文件，包含着 元素和其他相关 HTML 结构；js目录下的文件包含了插件的核心代码，一般会有一个 selectFilter.js 的主文件，以及可能的其他辅助脚本；css目录则存放了样式表，用于定义美化后的选择框样式；images目录可能包含箭头图标或其他必要的图像资源。
在实际应用中，我们首先需要在 HTML 中引入 selectFilter.js 和相关的 CSS 文件，然后对需要美化的 元素进行初始化。例如：
link rel="stylesheet" href="css/selectFilter.css">
script src="js/selectFilter.js">script>
script>
$(document).ready(function() {
$('#yourSelect').selectFilter();
});
script>
这里，#yourSelect是你要操作的下拉选择框的 ID。
此外，php 中文网免费下载站.txt和 php 中文网下载站.url 可能是提供插件下载和相关教程的链接资源，对于学习和使用 selectFilter.js 有一定的帮助。
selectFilter.js是一个强大的下拉选择框美化工具，它通过简洁的 API 和高度的可定制性，让开发者能够轻松地打造出美观且功能齐全的下拉选择框，提升网页的交互体验。在实际开发中，结合 jQuery 和其他前端技术，我们可以利用 selectFilter.js 创造出更多富有创新性的交互效果。
1.3. 用法
在的第一个设置值为空的就可以有空的值选择。
事件的话：$(‘select’).val(‘’); – 直接设置为空
1.3.1. select
name 可以按收选择的值【用于表单提交名称自定义】
1.3.2. option
（1）value：传给后台的参数
（2）selected：设置默认选中
（3）disabled：设置禁止选则
option value="2023">2023/option>
option value="2022" selected="selected">2022/option>
option value="2021" disabled="disabled">2021/option>
1.3.3. 赋值
$('#year_input_id').val("2023")
var yearFilterId = $('#year_filter_id')
var year1Html = ``
yearFilterId.append(year1Html);
var year2Html = ``
yearFilterId.append(year2Html);
var year3Html = ``
yearFilterId.append(year3Html);
$('#year_select_id').selectFilter({
callBack: function (val) {
$('#year_input_id').val(val)
}
});
1.3.4. 回调
$('.filter-box').selectFilter({
callBack : function (val){
console.log(val+'- 是返回的值')
}
});
1.4. selectFilter 源码
1.4.1. selectFilter.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.filter-disabled {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.filter-black {
width: 1.2rem;
}
.filter-box {
position: relative;
padding-top: 0.08rem;
}
.filter-box select {
display: none;
}
.filter-text {
height: 0.6rem;
overflow: hidden;
cursor: pointer;
border: 1px solid #e6e6e6;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 0.1rem;
margin-top: 0.08rem;
background-color: #efeff4;
}
.filter-text .filter-title {
min-width: 1.5rem;
max-width: 1.65rem;
border: 0;
background-color: transparent;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
font-size: 0.26rem;
margin-top: 0.2rem;
text-align: center;
}
.filter-list {
display: none;
width: 100%;
max-height: 40vh;
background-color: #fff;
font-size: 14px;
position: absolute;
z-index: 99;
border: 1px solid #e6e6e6;
overflow: auto;
}
.filter-list li.filter-null a {
color: #d2d2d2;
}
.filter-list li a {
display: block;
padding: 0 0.05rem;
line-height: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
font-size: 0.34rem;
text-align: center;
}
.filter-list li:hover {
background-color: #f2f2f2;
}
.filter-list li.filter-selected {
background-color: #5FB878;
}
.filter-list li.filter-selected a {
display: block;
color: #fff;
}
.filter-list li.filter-disabled {
background-color: #fff;
}
.filter-list li.filter-disabled a {
display: block;
color: #d2d2d2;
}
.filter-list li.filter-disabled:hover a {
cursor: not-allowed !important;
background-color: #fff;
}
.icon-filter-arrow {
width: 0.32rem;
height: 0.32rem;
margin-right: 0.2rem;
background-repeat: no-repeat;
background-image: url(../../img/icon/icon_arrow_down_x2.png);
background-size: 100%;
transition: all .2s;
}
.filter-list::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.filter-list::-webkit-scrollbar-track {
background: #fff
}
.filter-list::-webkit-scrollbar-thumb {
background: #CBCBCB;
}
1.4.2 .selectFilter.js
;jQuery.fn.selectFilter = function (options){
var defaults = {
callBack : function (res){}
};
var ops = $.extend({}, defaults, options);
var selectList = $(this).find('select option');
var that = this;
var html = '';
html += ''
;
$(selectList).each(function (idx, item){
var val = $(item).val();
var valText = $(item).html();
var selected = $(item).attr('selected');
var disabled = $(item).attr('disabled');
var isSelected = selected ? 'filter-selected' : '';
var isDisabled = disabled ? 'filter-disabled' : '';
if(selected) {
html += '+ isSelected +'" data-value="'+val+'">+valText+'">'+valText+'';
}else if (disabled){
html += '+ isDisabled +'" data-value="'+val+'">'+valText+'';
}else {
html += '+ val+'">+valText+'">'+valText+'';
};
});
html += '';
$(that).append(html);
$(that).find('select').hide();
$(that).on('click', '.filter-text', function (){
$(that).find('.filter-list').slideToggle(100);
$(that).find('.filter-list').toggleClass('filter-open');
$(that).find('.icon-filter-arrow').toggleClass('filter-show');
});
$(that).find('.filter-list li').not('.filter-disabled').on('click', function (){
var val = $(this).data('value');
var valText = $(this).find('a').html();
$(that).find('.icon-filter-arrow').toggleClass('filter-show');
$(this).addClass('filter-selected').siblings().removeClass('filter-selected');
$(this).parent().slideToggle(50);
for(var i=0; iselectList.length; i++){
var selectVal = selectList.eq(i).val();
if(val == selectVal) {
$(that).find('select').val(val);
};
};
ops.callBack(val);
});
$(document).on('mousedown', function(e){
closeSelect(that, e);
});
$(document).on('touchstart', function(e){
closeSelect(that, e);
});
function closeSelect(that, e) {
var filter = $(that).find('.filter-list'),
filterEl = $(that).find('.filter-list')[0];
var filterBoxEl = $(that)[0];
var target = e.target;
if(filterEl !== target && !$.contains(filterEl, target)
&& !$.contains(filterBoxEl, target)) {
filter.slideUp(50);
$(that).find('.filter-list').removeClass('filter-open');
$(that).find('.icon-filter-arrow').removeClass('filter-show');
};
}
};
1.5. 示例代码
1.5.1. index.tml
!doctype html>
html>
head>
meta charset="utf-8">
title>下拉列表/title>
meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
script type="text/javascript" src="../static/js/init-rem.js">/script>
link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/>
script type="text/javascript" src="../static/js/mui.min.js">/script>
link rel="stylesheet" type="text/css" href="../static/css/mui.loading.css"/>
script type="text/javascript" src="../static/js/mui.loading.js">/script>
script type="text/javascript" src="../static/js/my-mui-loading.js">/script>
link rel="stylesheet" type="text/css" href="../static/css/mobileSelect.css"/>
script type="text/javascript" src="../static/js/mobileSelect.min.js">/script>
script type="text/javascript" src="../static/js/echarts.min.js">/script>
link rel="stylesheet" type="text/css" href="../static/css/selectFilter.css"/>
script type="text/javascript" src="../static/js/jquery-3.1.1.min.js">/script>
script type="text/javascript" src="../static/js/selectFilter.js">/script>
link rel="stylesheet" type="text/css" href="../static/css/base.css"/>
script type="text/javascript" src="../static/helper/net-helper.js">/script>
script type="text/javascript" src="../static/helper/init-helper.js">/script>
script type="text/javascript" src="../static/constant/sp-constant.js">/script>
script type="text/javascript" src="../static/js/vconsole.min.js">/script>
script type="text/javascript">
/script>
/head>
body>
!--标题区域-->
section class="base-title-layout">
div class="base-title-bar">
span class="base-title-back" onclick="history.go(-1)">
img src="../img/icon/icon_back.png"/>
/span>
h1>下拉列表/h1>
span class="base-title-back">/span>
/div>
/section>
!--内容区域-->
div class="base-page-layout">
div class="base-select-section">
div>
div class="base-select-layout">
div id="year_select_id" class="filter-box">
div class="filter-text">
input id="year_input_id" class="filter-title"
type="text" placeholder="年份" readonly/>
i class="icon-filter-arrow">/i>
/div>
select id="year_filter_id" name="month_filter_id">/select>
/div>
/div>
/div>
/div>
/div>
script type="text/javascript" src="../js/page-select-filter.js">/script>
/body>
/html>
1.3.2. index.js
$(function () {
backPage()
listener()
initData()
})
function initData() {
}
function listener() {
$('#year_input_id').val("2023")
var yearFilterId = $('#year_filter_id')
var year1Html = ``
yearFilterId.append(year1Html);
var year2Html = ``
yearFilterId.append(year2Html);
var year3Html = ``
yearFilterId.append(year3Html);
$('#year_select_id').selectFilter({
callBack: function (val) {
$('#year_input_id').val(val)
}
});
}
原文地址: Html jquery 下拉 select 美化插件——selectFilter.js
