Adding OptGroups dynamically using jQuery in bootstrap-select

Question

I'm using this bootstrap-select as my default select in my project. Now I'm facing the problem on adding optgroup dynamically using jQuery. My current code looks like this

<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>

But the Select Output looks like this

<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>

Instead of

<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 Response

The 1st Response (for optGroup)

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

The 2nd Response (for options)

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

Answer 1

After a few review on my code I finally understand the logic of it and solve my problem.

First is I forgot to put ' ' on label (a basic error on my part)

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

that's why the result was data-tokens="Feb" 05="" 2018=""

Then second is I appended it on select instead of optGroup

Final Output looks like this

<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>