Question

我正在使用JQuery MultiSelect Dropdown，它正常工作，除非它位于另一个bootstrap元素中。下面的代码来自https://www.codingvila.com/2019/01/bootstrap-jquery-multi-select-drop-down-list-with-checkbox-in-asp-dot-net-using-csharp-and-vb-dot-net.html，并且粘贴时工作正常。但是，当我将其粘贴到旁边的bootstrap元素中时，文本不会显示。

我正在根据文档使用这些参考

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

在我的代码中，我有以下内容

 <script type="text/javascript">
    $(function () {
        $('[id*=lstStudents]').multiselect
            ({
                includeSelectAllOption: true
            });            
    });
</script>

ASP / HTML是

<asp:ListBox ID="ListBox1" CssClass="dropdown dropdown-menu form-control" runat="server" SelectionMode="Multiple">
                    <asp:ListItem Text="Nikunj Satasiya" Value="1">Nikunj Satasiya</asp:ListItem>
                    <asp:ListItem Text="Ronak Rabadiya" Value="2" />
                    <asp:ListItem Text="Hiren Dobariya" Value="3" />
                    <asp:ListItem Text="Vivek Ghadiya" Value="4" />
                    <asp:ListItem Text="Pratik Pansuriya" Value="5" />
                    <asp:ListItem Text="Kishan Patel" Value="6" />
</asp:ListBox>

引导区旁元素未正确显示文本。我已经通过了检查器，似乎无法确定导致文本不显示的设置。我的CSS受限制，所以我不太确定哪个元素会导致此问题或将零值归零。

<aside class="control-sidebar control-sidebar-dark">
    <div class="col-12">
       <div class="row">
            <div class="col-sm-12">
                <label for="lstStudents">Student(s) ID</label>
                <asp:ListBox ID="lstStudents" CssClass="dropdown dropdown-menu" runat="server" SelectionMode="Multiple">
                    <asp:ListItem Text="Nikunj Satasiya" Value="1" />
                    <asp:ListItem Text="Ronak Rabadiya" Value="2" />
                    <asp:ListItem Text="Hiren Dobariya" Value="3" />
                    <asp:ListItem Text="Vivek Ghadiya" Value="4" />
                    <asp:ListItem Text="Pratik Pansuriya" Value="5" />
                    <asp:ListItem Text="Kishan Patel" Value="6" />
                </asp:ListBox>
            </div>
        </div>
 </aside>

Answer 1

问题是它正在从旁边的面板继承背景色。解决方案是，我需要深入研究CSS并创建一个备用项，当其嵌套在旁边的面板中时可以被引用。

jQuery MultiSelect下拉列表不显示文本

1 个答案: