javascript - 如何在下拉列表中添加按钮？

Question

我编写了一个将 HTML 表显示到数据表中的代码。表头是动态的

<table id="tag" class="display table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        @foreach (var item in Model.HeaderModelList.Select((value, i) => new { i, value }))
                        {
                            <th id=@(item.i+1)>
                                @item.value.Category
                                <form>
                                    <div class="filterExcel form-group">
                                        <select id="TagCheckBox@(item.i+1)" name="TagCheckBox@(item.i+1)" asp-items="@item.value.HeaderOptions" multiple class="drp-TagCheckBoxMulti-Select">
                                        </select>
                                    </div>
                                </form>
                            </th>
                        }
                        <th id="@(Model.HeaderModelList.Count()+1)">Simulation Name 
                            <span class="filterExcel">
                                <select id="SmilulationCheckBox" name="SmilulationCheckBox" asp-items="@Model.Simulation" multiple class="drp-TagCheckBoxMulti-Select">
                                </select>
                            </span>
                        </th>
                        <th id="@(Model.HeaderModelList.Count()+2)">
                            Patient Name

                            <span class="filterExcel">
                                <select id="PatientCheckBox" name="PatientCheckBox" asp-items="@Model.PatientName" multiple class="drp-TagCheckBoxMulti-Select">
                                </select>
                            </span>
                        </th>
                    </tr>
                </thead>
            </table>

我的jQuery代码是

   $("#tag").DataTable({
                "aLengthMenu": [[10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
                "iDisplayLength": 10,
                serverSide: true,
                processing: true,
                stateSave: true,
                search: true,
                ajax: {
                    type: 'POST',
                    dataType: 'json',
                    url: 'GetFilteredPatientTags',
                    dataSrc: function (d) {
                        var values = [];
                        for (var i = 0; i < d.data.length; i++) {
                            var result = Object.values(d.data[i]);
                            values.push(result);
                        }
                        return values;
                    }
                }
            });

            $(".filterExcel").click(function (e) {
                e.stopPropagation();
            })

            $('.drp-TagCheckBoxMulti-Select').multipleSelect({
                placeholder: 'Select specific course',
                ellipsis: true,
                filter: true,
                filterAcceptOnEnter: true,
                animate: 'fade',
                width: 20
            })

            $('.ms-drop').width('fit-content')

多选用于过滤excel中的列

我的输出看起来像：

现在我需要在该下拉列表中添加一个选择按钮，用于过滤数据表中的相应数据。我怎样才能做到这一点？

标签： javascriptjquerydatatabledatatables