前言

之前在公司碰到一个业务，需要使用一个下拉框带搜索过滤功能，并且支持回显，将已经失效的数据进行提示。所以需要手写一个下拉框，该下拉框可自由配置，使用jq编写组件同时需要兼容浏览器ie8及以上

效果图

下拉框

代码解析

下面详细分析一下代码部分

配置挂载和使用方法

<script src="js/jquery.min.js"></script>
<script src="js/select.js"></script>
<div class="container">
  <h1>使用jQuery编写兼容ie8的多选下拉框搜索过滤</h1>
  <div id="demo1"></div>
  <button id="getSelectedValuesBtn">点我获取值</button>
</div>
<script>
  $(function() {
    $("#demo1").mySelect([
      { value: "000", text: "小明" },
      { value: "111", text: "小红" },
      { value: "222", text: "小黄" },
      { value: "333", text: "小绿" },
      { value: "444", text: "小黑" },
      { value: "555", text: "小粉" }
    ], ["111", "777", "888", "222"]);
  });
</script>

导入jq插件和封装的select.js（后续都在这个文件里写入）代码，实例化为$(“id选择器”).mySelect([{value:值，text:下拉框名称}}],[已经配置的值])，该组件实例化一次即可

select初始化

1.使用$.fn挂载一个对象名字叫mySelect 获取上面传入的值

*$*.fn.mySelect = function(*options*,*selectedValues*) {}

2.使用JavaScript写入html代码样式详见css文件

var $this = $(this);
        // 生成选项列表
        var html = '';
        html += '<div class="select-picker-container">';
        html += '<div class="select-picker-search">';
        html += '<div class="select-picker-search-checked">请选择</div>';
        html += '</div>';
        html += '<div class="select-picker-options-wrp">';
        html += '<div class="select-picker-options-serch">';
        html += '<input type="text" placeholder="">';
        html += '</div>';
        html += '<div class="select-picker-options-list">';

判断传入的数据源和当前配置的值

这里提前将失效的标出

// 检查selectedValues中是否有不在options中的值
        var missingValues = [];
        for (var j = 0; j < selectedValues.length; j++) {
            var selectedValue = selectedValues[j];
            var found = false;
            for (var k = 0; k < options.length; k++) {
                if (options[k].value === selectedValue) {
                    found = true;
                    break;
                }
            }
            if (!found) {
                missingValues.push(selectedValue);
            }
        }

        // 增加红色提示并列出不存在的值
        if (missingValues.length > 0) {
            html += '<div><div style="color:red; font-size: smaller;">&nbsp;以下选择值不存在或者失效:<br></div>';
            for (var l = 0; l < missingValues.length; l++) {
                var selected = 'duihao-no'; 
                html += '<div class="select-picker-options-list-item">';
                html += '<b class="' + selected + '"></b>';
                html += '<span style="color: red;">' + missingValues[l] + '</span>';
                html += '</div>';
            }
            html += '</div>'
        }

循环数据源

遍历 options 数组，每个元素代表一个选项。
从每个选项中提取 value 和 text 属性。
检查 selectedValues 数组中是否包含当前选项的 value，根据检查结果设置 selected 变量的值（duihao-checked 或 duihao-nocheck）。
根据提取的信息和 selected 变量，生成相应的 HTML 结构，添加到 html 变量中。


for (var i = 0; i < options.length; i++) {
    var option = options[i];
    var value = option.value;
    var text = option.text;
    var selected = ($.inArray(value, selectedValues) !== -1) ? 'duihao-checked' : 'duihao-nocheck'; // 检查是否被选中
    html += '<div class="select-picker-options-list-item" data-value="' + value + '">';
    html += '<b class="duihao ' + selected + '"></b>';
    html += '<span>' + text + '</span>';
    html += '</div>';
};

选择与取消

新加一个数组，每次选择判断,主要功能是处理用户在选项列表中点击选项的交互操作，并根据用户的选择更新显示的已选项列表。通过点击选项，用户可以选择或取消选择某个选项，同时界面会动态更新已选项的显示内容。

// 点击选中或取消
        $this.on('click', ".select-picker-options-list-item", function() {
            var $item = $(this);
            if ($item.find('.duihao-nocheck').length > 0) {
                $item.find('.duihao').removeClass('duihao-nocheck').addClass('duihao-checked');
            } else {
                $item.find('.duihao').addClass('duihao-nocheck').removeClass('duihao-checked');
            }
            
            // 更新已选项
            var checkedArr = [];
            $this.find(".select-picker-options-list-item").each(function() {
                var $thisItem = $(this);
                if ($thisItem.find('.duihao-checked').length > 0) {
                    checkedArr.push($.trim($thisItem.find('span').text()));
                }
            });
            if (checkedArr.length > 0) {
                $this.find('.select-picker-search-checked').text(checkedArr.join(','));
            } else {
                $this.find('.select-picker-search-checked').text('请选择');
            }
        });

数据搜索

遍历每个选项，获取选项的文本并转换为小写。如果选项文本中包含输入的文本，则显示该选项，否则隐藏该选项。

// 前端实现下拉搜索
        $this.on('keyup', ".select-picker-options-serch input", function() {
            var text = $(this).val().toLowerCase();
            var $options = $this.find(".select-picker-options-list-item");
            $options.each(function() {
                var $option = $(this);
                var optionText = $option.find('span').text().toLowerCase();
                if (optionText.indexOf(text) !== -1) {
                    $option.show();
                } else {
                    $option.hide();
                }
            });
        });

获取数据方法

获取数据方法则同样使用$.fn的对象挂载，获取已经选择的数据里面的数据，判断为样式是否勾选

//获取下拉框已经选中的数据对象
	$.fn.getNameValues = function() {
        var $selectWrapper = $(this);
        var selectedValuesWithData = [];
        $selectWrapper.find(".select-picker-options-list-item").each(function() {
            var $thisItem = $(this);
            if ($thisItem.find('.duihao-checked').length > 0) {
                var value = $thisItem.data('value');
                var name = $thisItem.find('span').text();
                selectedValuesWithData.push({ value: value, name: name });
            }
        });
        // console.log("当前选择的值:", selectedValuesWithData);
		return selectedValuesWithData;
    };