动态插入的“选择”下拉字段无法正常工作

由 发布于 javascripthtmlbootstrap-4
 收藏

我有一个选择下拉字段，其中使用JavaScript插入了选项。第一次加载页面时，它工作正常，但是刷新后，选择字段消失了。我正在将bootstrap-selectpicker.js与CSS的Material-Design一起使用。

有趣的是，如果我清除缓存并重新加载页面，它将再次起作用，或者如果我关闭页面并再次打开链接。

回调函数fun.get_dosageUnits从db获取选项，并循环执行以创建select html，最后将它们插入div标签。

fun.get_dosageUnits( units => {
    let selected,selectOpt='<select class="selectpicker" name="dosageUnit" data-size="7" data-style="btn btn-primary btn-round" title="Dosage Unit">';
    units.forEach((unit,index) =>{
        if(index == 0){ selected = 'selected'}
        selectOpt += `<option value="${unit.dosage_units}"${ selected}>${unit.dosage_units}</option>`;       
        selected ='';       
    });
     document.querySelector('.setDosageUnit').innerHTML = `${selectOpt}</select>`; 
});

<div class="form-group setDosageUnit"></div>

我认为我必须重新初始化bootstrap-selectpicker.js或任何人都可以帮忙的东西

评论