基于动态数组的Multi-select Filter Checkbox实现无输出故障求助

需求与参考组件 #

参考两个开源组件实现带动态数组值的多选过滤复选框：

• GitHub上的filter-multi-select组件
• jQueryScript上的多选过滤复选框组件

动态数组arr=[&callback\ | &s\ | action | app]由用户选择保存，值随用户操作变化。

实现代码 #

动态创建Select字段函数 #

function createFiledSelectEnrich(fileds) {
        var select = '<select multiple name="fieldSelected" class="form-control form-control-cust" id="fieldSelect">';
        for ( var key in fileds) {
            var option = $("<option>", {
                "value" : key
            }).text(key).data("customData", fileds[key]);
            console.log('option:' + option + ',  option.html:'
                    + option[0].outerHTML);
            select += option[0].outerHTML;
        }
        select += '</select>';
        //clear existing fields & add new fields
        $("#fieldSelectDiv").empty().append(select);
    }

组件初始化与选中设置 #

var enrichmentField = "${enrichmentField}";
const options = $('#fieldSelect').filterMultiSelect({
            // displayed when no options are selected
            placeholderText : "Select at-least one",
            // placeholder for search field
            filterText : "Search",
            // Select All text
            selectAllText : "Select All",
        });
        //regex remove delimiter and whitespaces 
        var arr = enrichmentField.split(/\s*\|\s*/);
        if (options) {
            arr.forEach(function(value) {
                console.log("value :", value);
                options.selectOption(value);
            });
        } else {
            console.error("Multi-select component not initialized properly");
        }

问题现象 #

组件无输出，页面仅显示空白区域。

测试代码 #

HTML结构 #

<label for="multiselectop" class="form-label">Multiselect</label> 
<select multiple name="multiselect" id="multiselectop">
        <option value="cheese">Cheese</option>
        <option value="tomatoes">Tomatoes</option>
        <option value="mozzarella">Mozzarella</option>
            <option value="mushrooms">Mushrooms</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="onions">Onions</option>
</select>

JS初始化代码 #

$(document)
        .ready(
                function() {

                    var arr = [ "cheese", "tomatoes", "mozzarella",
                            "mushrooms", "pepperoni", "onions" ];

                    const options = $('#multiselectop').filterMultiSelect({

                        // displayed when no options are selected
                        placeholderText : "Select at-least one",

                        // placeholder for search field
                        filterText : "Filter",

                        // Select All text
                        selectAllText : "Select All",

                    });
                    console.log(arr);

                    if (options) {
                        // Iterate over the array and select each option
                        arr.forEach(function(value) {
                            // Assuming selectOption is the method to select an option
                            options.selectOption(value);
                        });
                    } else {
                        console
                                .error("Multi-select component not initialized properly");
                    }
});

预期效果 #

显示带搜索框、全选按钮的多选复选框组，且能正确选中动态数组中的指定选项。

排查解决建议 #

1. 确认组件初始化时机
   必须在createFiledSelectEnrich函数执行完成、动态select元素已插入DOM后，再调用filterMultiSelect初始化组件。当前代码可能存在DOM元素未就绪就初始化的问题，导致$('#fieldSelect')找不到元素，返回的options无效。

2. 校验数组值与Option的匹配性

   • 打印enrichmentField的实际值，确认${enrichmentField}模板渲染正确，没有额外的转义或空白字符。
   • 检查分割后的arr数组元素，是否与动态创建的option的value完全一致（比如&callback\是否在option的value中是&callback，转义符是否处理正确）。

3. 检查组件实例与方法调用
   查阅组件官方文档，确认filterMultiSelect的返回值是否为可调用selectOption的实例。部分jQuery插件返回的是jQuery对象，而非组件实例，此时需要改用原生方式设置选中：

   arr.forEach(function(value) {
       $('#fieldSelect option[value="' + value + '"]').prop('selected', true);
   });
   // 触发组件更新
   $('#fieldSelect').trigger('change');
   

4. 验证依赖加载

   • 确保jQuery库已在组件脚本之前加载，无加载顺序问题。
   • 确认组件的CSS和JS文件已正确引入，无404错误。

5. 调试辅助

   • 在初始化组件前添加console.log($('#fieldSelect').length)，确认元素是否存在。
   • 打印options的值，判断是否为有效组件实例。
   • 在selectOption调用前后，打印组件的DOM结构，观察是否有变化。

内容的提问来源于stack exchange，提问作者CypherBee