附加范围以进行选择

Question

我已经能够使用HTML

在我的网站中创建静态引导选择列表

<select id="testDrop" class="selectpicker input-lg form-control">
    <optgroup label="Constraints Applied">
        <option data-content="<span style='display: inline-block;min-width:80px;'>Day 1</span><span class='label label-success'>Any Room</span>"></option>
        <option data-content="<span style='display: inline-block;min-width:80px;'>Day 2</span><span class='label label-success'>3 from 30 available</span>"></option>
        <option data-content="<span style='display: inline-block;min-width:80px;'>Day 3</span><span class='label label-success'>Of Type: Computer Lab</span>"></option>
    </optgroup>
    <optgroup label="No Constraints Applied">
        <option>Day 4</option>
        <option>Day 5</option>
        <option>Day 6</option>
    </optgroup>
</select>

虽然我不确定如何使用jQuery / JavaScript创建动态版本？

HTML

<select id="plannerStartSelector" style="width:300px;">
</select>

JS

var dateSelect = m.format('DD/MM/YYYY') + " (" + dow + ")";
var spanOpt;
if (problems === true) {
    spanOpt = "<span style='display: inline-block;min-width:80px;'>" + dateSelect + "</span><span class='label label-danger'>Problem</span>"
} else {
    spanOpt = "<span style='display: inline-block;min-width:80px;'>" + dateSelect + "</span>";
}

$(this.ui.plannerStartSelector).append($("<option></option>").attr("data-content", spanOpt));

$(this.ui.plannerStartSelector).select2({
    placeholder: "- Select a Date -",
});

我是如何实现这一目标的？在线搜索没有给我任何答案。任何帮助将不胜感激。