点击按钮添加Bootstrap Select元素后无法显示的问题

安全阿岳

2026-7-8

问题解决：动态添加Bootstrap Select元素无法显示样式

原因分析

Bootstrap-select插件会在页面加载完成后自动初始化所有带有selectpicker类的元素。但通过innerHTML +=动态添加的元素，插件并未对其进行初始化，因此无法渲染出对应的样式和交互功能。此外，使用innerHTML +=修改body内容时，会重新解析整个DOM树，可能导致已初始化的组件失效。

解决方案

方法1：使用jQuery动态创建并初始化

替换原有的addElement函数，通过jQuery方式添加元素并手动触发插件初始化：

function addElement(){
    // 添加普通select
    $('<select><option>Mustard</option><option>Ketchup</option></select>').appendTo('body');
    
    // 添加并初始化Bootstrap-select元素
    $('<select class="selectpicker" multiple data-live-search="true"><option>Mustard</option><option>Ketchup</option></select>')
        .appendTo('body')
        .selectpicker(); // 手动调用初始化方法
}

方法2：原生JS写法优化+手动初始化

若坚持使用原生JS，需避免innerHTML +=的写法，改用DOM创建方法添加元素后再初始化：

function addElement(){
    // 创建普通select
    let normalSelect = document.createElement('select');
    normalSelect.innerHTML = '<option>Mustard</option><option>Ketchup</option>';
    document.body.appendChild(normalSelect);
    
    // 创建Bootstrap-select元素
    let bsSelect = document.createElement('select');
    bsSelect.className = 'selectpicker';
    bsSelect.setAttribute('multiple', '');
    bsSelect.setAttribute('data-live-search', 'true');
    bsSelect.innerHTML = '<option>Mustard</option><option>Ketchup</option>';
    document.body.appendChild(bsSelect);
    
    // 手动初始化新添加的selectpicker
    $(bsSelect).selectpicker();
}