javascript - 以编程方式设置时不应用 Bootstrap 类

Question

当用户从下拉列表中选择表名时，我以编程方式将选择标记添加到 div“dataColumnBuilder”

<select class="dataTableSelect form-control" onchange="addFields();" onfocus="this.selectedIndex=-1;">
    <option value="">--</option>
    <option value="tableName">tableName</option>
</select>

通过调用这个js函数:

function addFields($datasetNm){
    var myDiv=document.getElementsByClassName("dataColumnBuilder");
    var selectList = document.createElement("select");
    selectList.setAttribute('data-placeholder', 'Choose Columns');
    selectList.setAttribute('class', 'chosen-select');
    selectList.setAttribute('tabindex', '4');
    selectList.setAttribute('multiple','');
    myDiv[0].appendChild(selectList);
    for (var i = 0; i <dataCols.length; i++) {
        var option = document.createElement("option");
        option.value = dataCols[i];
        option.text = dataCols[i];
        selectList.appendChild(option);
    }
}

和

$(函数() { $('.chosen-select').chosen(); });

它成功地将选择标签添加到 div:

<select data-placeholder="Choose Columns" class="chosen-select" tabindex="4" multiple="">
    <option value="pgm_id">pgm_id</option>
    <option value="title">title</option>
    <option value="description">description</option>
    <option value="status">status</option>
    <option value="approved_date">approved_date</option>
</select>

问题是我看不到“chosen-select”类，它是应用到以编程方式添加的选择列表上的 Bootstrap 类。

而如果我直接将它添加到 html 文件中，我将看到应用的类，所以我不知道我缺少什么。

您可以在这里检查问题:https://jsfiddle.net/Natalie77/96eds8vz/ 提前致谢

Answer 1

您调用$.fn.chosen DOM 准备就绪，但永远不要在新创建的 <select> 上再次调用它元素。

调用$(selectList).chosen()将节点添加到 DOM 后。

<小时/>

_{此外，避免混合使用 inline-javascript 和 jQuery，否则添加 jQuery 有何意义？}