Question

当用户从下拉列表中选择一个表名时，我以编程方式将一个select标签添加到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);
    }
}

和

$(function() { $('.chosen-select').chosen(); });

它成功地将一个select标签添加到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>

问题是我看不到类“selected-select”，它是在编程方式添加的选择列表中应用的bootstrap类。

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

您可以在此处查看问题：https://jsfiddle.net/Natalie77/96eds8vz/ 提前致谢

Answer 1

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

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

_{另外，避免混合使用inline-javascript和jQuery，否则添加jQuery的重点是什么？}

以编程方式设置时不应用bootstrap类

1 个答案: