Html jquery下拉select美化插件——selectFilter.js

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 <select> 元素转换为具有自定义样式的可交互控件。它提供了丰富的定制选项，包括但不限于字体、颜色、背景、边框等，使得下拉框不仅在视觉上更加吸引人，同时也能更好地融入到网页的整体设计中。
  jquery.selectlist.js插件为开发者提供了一种简单且强大的方式来美化和优化网页中的下拉框元素。通过深入理解插件的工作原理和使用方法，我们可以将其灵活运用到实际项目中，提升网站的交互性和美观度。而对于有编程基础的开发者来说，进一步对插件源码进行二次开发，可以创造出更多个性化的下拉框特效，满足更复杂的需求。

1.1. 流程

  在实际应用中，jquery.selectlist.js插件的使用流程通常是这样的：
（1）确保在页面中引入了jQuery库和jquery.selectlist.js插件文件。根据提供的压缩包文件名，我们可以看到有三个主要文件：index.html、css和js。其中，index.html是示例页面，css目录可能包含了插件的样式文件，而js目录则包含插件的JavaScript代码。
（2）在HTML中，我们需要一个或多个<select>元素，这些元素将会被插件转换。每个<select>元素可以包含多个<option>，用于展示不同的选择项。
（3）接着，在文档加载完成后，通过调用jQuery的选择器和插件方法，例如$('select').selectlist();，将选中的<select>元素应用插件效果。
（4）如果需要自定义样式或功能，可以通过插件提供的配置选项进行设置。比如，你可以改变默认的下拉箭头图标，调整选中项的高亮样式，甚至添加自定义事件处理函数。
（5） 为了实现更好的用户体验，jquery.selectlist.js插件可能还支持触屏设备的交互，使下拉框在手机或平板电脑上也能流畅操作。

1.2. 主要功能

（1） 样式美化：该插件能够将传统的HTML <select>元素转换为具有现代感和自定义样式的组件。它可以改变下拉箭头的样式，调整选项的文字颜色、背景色等，使得整体风格与网站设计更加协调。
（2） 过滤功能：selectFilter.js提供了搜索过滤功能，允许用户在下拉选项中输入关键词，快速定位到所需选项，大大提高了选择效率。
（3） 事件处理：插件支持多种事件，如change（选中项改变）、focus（获取焦点）、blur（失去焦点）等，开发者可以方便地绑定自定义函数，实现更丰富的交互逻辑。
（4） 可定制性：selectFilter.js允许开发者自定义多项设置，包括但不限于主题颜色、字体大小、搜索框样式等，以适应不同场景的需求。
  在使用selectFilter.js时，我们通常会配合HTML、CSS和JavaScript来完成界面的构建。index.html是主页面文件，包含着<select>元素和其他相关HTML结构；js目录下的文件包含了插件的核心代码，一般会有一个selectFilter.js的主文件，以及可能的其他辅助脚本；css目录则存放了样式表，用于定义美化后的选择框样式；images目录可能包含箭头图标或其他必要的图像资源。
  在实际应用中，我们首先需要在HTML中引入selectFilter.js和相关的CSS文件，然后对需要美化的<select>元素进行初始化。例如：

<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 = `<option value="2023">2023</option>`
    yearFilterId.append(year1Html);
    var year2Html = `<option value="2022" selected="selected">2022</option>`
    yearFilterId.append(year2Html);
    var year3Html = `<option value="2021" disabled="disabled">2021</option>`
    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

/**
 * selectFilter  --v1.0
 *
 **/
* {
    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

/**
 * options={
 *  callBack : function (res){}  // 返回选中的值 进行事件操作
 * }
 * 也可以放在表单直接获取  select标签的 值
 **/

;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 = '';

	// 读取select 标签的值
	html += '<ul class="filter-list">';

	$(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 += '<li class="'+ isSelected +'" data-value="'+val+'"><a title="'+valText+'">'+valText+'</a></li>';
			//$(that).find('.filter-title').val(valText);
		}else if (disabled){
			html += '<li class="'+ isDisabled +'" data-value="'+val+'"><a>'+valText+'</a></li>';
		}else {
			html += '<li data-value="'+val+'"><a title="'+valText+'">'+valText+'</a></li>';
		};
	});
	html += '</ul>';
	$(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('.filter-title').val(valText);
		$(that).find('.icon-filter-arrow').toggleClass('filter-show');
		$(this).addClass('filter-selected').siblings().removeClass('filter-selected');
		$(this).parent().slideToggle(50);
		for(var i=0; i<selectList.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">
        //var vc = new VConsole()
    </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 = `<option value="2023">2023</option>`
    yearFilterId.append(year1Html);
    var year2Html = `<option value="2022" selected="selected">2022</option>`
    yearFilterId.append(year2Html);
    var year3Html = `<option value="2021" disabled="disabled">2021</option>`
    yearFilterId.append(year3Html);
    $('#year_select_id').selectFilter({
        callBack: function (val) {
            $('#year_input_id').val(val)
        }
    });
}