3

我正在尝试在我正在 MVC 中开发的 Web 应用程序中使用Bootstrap-Select来设置下拉列表的样式，因为我的应用程序的其余部分正在使用引导程序。我的布局页面中有一个汽车制造商下拉列表，它调用 Html.Action 来执行控制器并从我的数据库中的表中构建制造商列表并返回下面的部分视图： - 请注意单击其中的一个值下拉表单被提交并且用户被导航到下一个屏幕。

<script type="text/javascript" src="~/Scripts/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-select.css"/>
<script type="text/javascript">

    $(document).ready(function() {

        $('.selectpicker').selectpicker();

        $('#carManufacturers').change(function () {
            $(this).closest('form').submit();
        });

    });
</script>

@using (Html.BeginForm("Index", "Cars", FormMethod.Post))
{
    @Html.DropDownListFor(model => model.SelectedCarManufacturer, Model.CarManufacturersList, "Select Car Manufacturer", new { id = "carManufacturers", @class = "selectpicker" })
}

这主要是因为下拉菜单似乎在引导程序中设置了样式-我不确定的一件事是如何将data-style="btn-inverse"属性添加到我的下拉列表中-尝试在 @class="selectpicker' 之后添加逗号并定义它但是它不工作。

出于某种原因，智能感知强调了 selectpicker 并声明了“未知的 css 样式 selectpicker”？

此外，在呈现下拉列表时，如下所示 - 我怎样才能摆脱正在添加的第二个“选择汽车制造商文本”？ 在此处输入图像描述

4

1 回答 1

5

要添加data-style属性，只需执行以下操作：

@Html.DropDownListFor(model => model.SelectedCarManufacturer, Model.CarManufacturersList, "Select Car Manufacturer", new { id = "carManufacturers", @class = "selectpicker", data_style = "btn-inverse" })

注意下划线，它会自动翻译成破折号。

至于重复的“选择汽车”文本，从您的图片中没有重复。它向您显示当前选定的值及其下方的值列表。这就是选择列表的功能。

于 2014-07-19T00:27:40.087 回答