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"
                           })

如果我检查页面，我可以找到具有正确选项的选择，但不会在页面上显示，除非我删除了该类＆＃34; Selectpicker＆＃34;任何建议如何解决这个问题？

感谢。

Answer 1

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

查看计算出的属性：

在Google Chrome上打开开发人员工具（f12或检查所需元素上的元素）
在“元素”选项卡上选择要检查的元素
从开发者工具的右侧窗格中选择Computed Tab

在那里你会找到计算出的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下拉列表选择选择器未显示

2 个答案: