javascript - 在 bootstrap-select 中使用 jQuery 动态添加 OptGroups

Question

我正在使用这个bootstrap-select作为我项目中的默认选择。现在我面临着使用 jQuery 动态添加 optgroup 的问题。我当前的代码如下所示

<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true"></select>
<script>
       var url = "@Url.Action("ToDoListDay", "Dropdown")";
       var urlData = "@Url.Action("ToDoListData","Dropdown")";
       $.get(url, function (e) {
            var text_Employee = $("#ToDoList");
            $.each(e, function (i, v) {
            text_Employee.append($("<optgroup  label=" + v.Description + ">"));
                $.get(urlData, { DateParam: this.Description }, function (z) {
                    $.each(z, function (x, a) {                          
                     text_Employee.append($("<option data-tokens="+a.data_token+"/>").val(a.ID).text(a.value));
                    });
                    text_Employee.append($("</optgroup>"));
                });
            });                                   
        $('#ToDoList').selectpicker('refresh');
        });
</script>

但是选择输出看起来像这样

<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true" tabindex="-98">
   <optgroup label="Feb" 05="" 2018="">
   </optgroup>
   <option data-tokens="Feb" 05="" 2018="" asd="" value="25">asd</option>
   <option data-tokens="Feb" 05="" 2018="" a="" value="26">a</option>
</select>

而不是

<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true" tabindex="-98">
  <optgroup label="Feb 05 2018">
    <option data-tokens="Feb 05 2018 asd" value="25">asd</option>
    <option data-tokens="Feb 05 2018 a" value="26">a</option>
  </optgroup>
</select>

Json 响应

第一个响应(针对 optGroup)

[{"Description":"Feb 05 2018"}]

第二个响应(用于选项)

[
 {"ID":25,"data_token":"Feb 05 2018 asd","value":"asd"},
 {"ID":26,"data_token":"Feb 05 2018 a","value":"a"}
]

Answer 1

经过对代码的一些审查，我终于理解了它的逻辑并解决了我的问题。

首先是我忘记将 ' ' 放在标签上(我的一个基本错误)

text_Employee.append($("<optgroup  label=" + v.Description + ">"));

这就是为什么结果是 data-tokens="Feb"05=""2018=""

然后第二个是我将其附加到 select 而不是 optGroup

最终输出如下所示

<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true"></select>
<script>
var url = "@Url.Action("ToDoListDay ", "Dropdown ")";

$.get(url, function(e) {
    var text_Employee = $("#ToDoList");
    $.each(e, function(i, v) {
        console.log("Desc: " + v.Description);
        OptGroup(v.value.toString(), v.Description.toString()).done(function() {
            Options(v.value.toString(), v.Description.toString()).done(function() {
                console.log("Done appending Group");
                $('#ToDoList').selectpicker('refresh');
            });
        });
    });

});

function OptGroup(value, Description) {
    var dfrdOptGroup = $.Deferred();
    var text_Employee = $("#ToDoList");

    text_Employee.append($("<optgroup  id='" + value + "' label='" + Description + "' >"));
    console.log("1");
    dfrdOptGroup.resolve();
    return dfrdOptGroup.promise();
}

function Options(ID, Description) {

    var dfrdOptions = $.Deferred();
    var urlData = "@Url.Action("ToDoListData ","Dropdown ")";
    var text_Employee = $("#" + ID + "");

    $.get(urlData, {
        DateParam: Description
    }, function(z) {
        $.each(z, function(x, a) {
            console.log("2");
            text_Employee.append($("<option data-tokens='" + a.data_token.toString() + "' />").val(a.ID).text(a.value));
        });
        dfrdOptions.resolve();
    });

    return dfrdOptions.promise();
}
</script>