Ajax Select Picker自动生成的外部列表无法操作求助

核心思路 #

Ajax Select Picker基于bootstrap-select实现，会将原生<select>的<option>转换为可视化的<li>列表，原生option的title属性不会自动同步到生成的<li>，需要通过插件事件钩子或DOM同步操作来实现。

具体实现步骤 #

1. 给原生Option注入title数据 #

先确保所有option（包括初始渲染和AJAX加载的）都携带title信息：

• 初始渲染的option：修改循环生成代码，添加title属性

// 初始渲染option的循环里，给option加上title
for (var i = 0; i < itens.length; i++) {
    var title = itens[i].nome; // 可替换为你需要显示的title文本
    if (valorSelecionadoFiltro && valorSelecionadoFiltro == itens[i].nome) {
        textToInsert[idx++] = '<option selected data-valorId="' + itens[i].valorId + '" value="' + itens[i].id + '" title="' + title + '">' + itens[i].nome + '</option>';
    } else {
        textToInsert[idx++] = '<option data-valorId="' + itens[i].valorId + '" value="' + itens[i].id + '" title="' + title + '">' + itens[i].nome + '</option>';
    }
}

• AJAX加载的数据：在preprocessData中给每个选项的data字段添加title

preprocessData: function (data) {
    var array = [];
    if (data != null && data.length > 0) {
        for (var i = 0; i < data.length; i++) {
            try {
                array.push($.extend(true, data[i], {
                    text: data[i].nome,
                    value: data[i].id,
                    data: {
                        valorId: data[i].valorId,
                        title: data[i].nome // 注入title数据
                    }
                }));
            } catch (e) {
                console.log(e.message);
            }
        }
    }
    return array;
}

2. 利用插件事件同步title到

#

bootstrap-select在渲染完成下拉列表后会触发loaded.bs.select事件，此时可以遍历生成的<li>并设置title：

// 监听下拉列表渲染完成事件
slValorFiltro.on('loaded.bs.select', function() {
    var $select = $(this);
    // 获取插件生成的下拉容器里的所有li
    $select.next('.bootstrap-select').find('.dropdown-menu li').each(function(index) {
        // 对应原生select的option
        var $option = $select.find('option').eq(index);
        // 给li设置title，优先取option的title属性，其次取data-title
        var title = $option.attr('title') || $option.data('title');
        if (title) {
            $(this).attr('title', title);
        }
    });
});

3. 处理AJAX动态加载后的同步 #

因为AJAX Select Picker会动态加载新数据，需要在AJAX请求完成后重新同步title：

// 监听AJAX加载完成事件
slValorFiltro.on('ajaxComplete.ajaxSelectPicker', function() {
    // 重新触发loaded事件，执行同步逻辑
    $(this).trigger('loaded.bs.select');
});

4. 自定义模板（可选） #

如果插件支持自定义模板，可以直接在配置中定义<li>的模板，自动带入title：

ajaxSelectPicker({
    // 其他配置...
    templates: {
        // 自定义下拉项模板，直接加入title属性
        dropdownItem: '<li><a tabindex="0" class="dropdown-item" data-id="{{value}}" title="{{data.title}}">{{text}}</a></li>'
    },
    // 其他配置...
});

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