Question

我跟随里克安德森的榜样，但我无法让它发挥作用。我有原始的多选框，但没有选择收获的多选。

查看：

@Html.ListBox("Clearances", ViewBag.Clearanceslist as MultiSelectList, new { htmlAttributes = new { @class = "form-control chosen-select", style="width:350px;" } })

视图下的

是我的javascript：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $('.datepicker').datepicker();
    $(".chosen-select").chosen();
</script>
}

这是我在BundleConfig.cs中包含的脚本：

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/chosen.jquery.js"
                ));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));

    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",                      
              "~/Scripts/bootstrap-datepicker.js",
              "~/Scripts/respond.js"));

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/datepicker.css",
              "~/Content/chosen.css",
              "~/Content/site.css"));
}

控制器：

private MultiSelectList GetClearances(string[] selectedValues)
{
    return new MultiSelectList(db.Clearances.Where(c => c.Active == true), "ClearanceID", "ClearanceName", selectedValues);
}

// GET: CardKeys/Create
public ActionResult Create()
{
    ViewBag.Clearanceslist = GetClearances(null);
    return View();
}

我还想念什么？

Answer 1

100％确保在引用chosen.jquery.js脚本后引用jQuery脚本，否则您选择的插件将无法正常运行。

如果您的布局很复杂且由许多部分组成，我建议您通过浏览器开发人员工具或打开页面的源代码进行检查。

还要确保未多次加载jQuery脚本。

我要做的另一件事是更改View代码，如下所示：

@Html.ListBox("Clearances", ViewBag.Clearanceslist as MultiSelectList, new { @class = "form-control chosen-select", style="width:350px;" })

您是否在自己的版本中检查了呈现的HTML？像这样：

<select htmlAttributes="{ class = form-control chosen-select, style = width:350px; }" id="Clearances" multiple="multiple" name="Clearances">
...
</select>

jQuery不会使用这种HTML正确获取元素。

Answer 2

您已在捆绑包配置中正确地将文件添加到捆绑包中，但实际上您在哪里调用该捆绑包？

尝试按以下方式更改

 @section Scripts {
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/jqueryval")

 <script type="text/javascript">
$('.datepicker').datepicker();
$(".chosen-select").chosen();
</script>
}

Answer 3

事实证明它与脚本无关。但是这行上的html渲染存在问题：

@Html.ListBox("Clearances", ViewBag.Clearanceslist as MultiSelectList, new { htmlAttributes = new { @class = "form-control chosen-select", style="width:350px;" } })

此行将呈现这样的html，这将阻止选择正常工作：

<select htmlAttributes="{ class = form-control chosen-select, style = width:350px; }" id="Clearances" multiple="multiple" name="Clearances">

我将其更改为：

@Html.ListBox("Clearances", ViewBag.Clearanceslist as MultiSelectList, htmlAttributes : new { @class = "form-control chosen-select", style="width:350px;" } )

现在它完美无缺。

mvc harvest选择了多选下拉列表

3 个答案: