Mvc Dropdownlist Select 选择器未显示

Question

我很确定这可能是我需要的一些脚本参考，但这是我目前所拥有的。

我的脚本：

    script src="~/scripts/jquery-3.1.1.js"></script>


<script src="~/Scripts/knockout-3.4.2.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/bootstrap-select.min.js"></script>
<script type="text/javascript">


    $(document).ready(function () {
        $(".selectpicker").selectpicker({
            liveSearch: true,
            showSubtext: true
        });
    });
</script>

在此之后使用 Knockout 加载对象。

我的Css:

<link rel="stylesheet" href="~/Content/bootstrap-select.min.css">

和正常 Bootstrap.

这是我的下拉菜单：

 <td><u>persons</u><br />@Html.DropDownList("PersonId", (SelectList)ViewBag.PersonId, "Choose the person you want.", htmlAttributes: new
                           {
                               @class = "selectpicker",
                               data_show_subtext = "true",
                               data_live_search = "true"
                           })

如果我检查页面，我可以找到具有正确选项的 select，但不会显示在页面上，除非我删除 class "Selectpicker" 任何解决此问题的建议？

谢谢。

Answer 1

您需要检查 chrome 开发人员工具，此元素的计算属性是什么，您可能会发现此 class 有另一个隐藏它的实现。

查看计算属性：

在 google chrome 上打开开发人员工具（f12 或检查所需元素上的元素）
Select 您要在“元素”选项卡上查看的元素
从开发者工具的右侧窗格 select 计算选项卡

在那里你会找到计算的 CSS 属性列表，如果你点击任何属性，它会打开这个实现的位置

希望对您有所帮助

Answer 2

我遇到了同样的情况，下面的代码没有渲染：

<div class="field"> <label for="title">Title</label> @Html.DropDownList("TitleList", new SelectList(Model.claimantTitles, "TitleId", "Title"), "--Select Title--", new { @class = "dropdown-menu", @arialabelledby = "dropdownlabel" }) </div>

我删除了：@class = "dropdown-menu" 并且有效

Mvc Dropdownlist Select 选择器未显示

Mvc Dropdownlist Select picker not showing

c#

asp.net

razor

bootstrap-selectpicker