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>

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

1 个答案: