在 MVC Asp Net 中使用 Chosen jQuery 插件答案

【问题标题】：Use Chosen jQuery plugin in MVC Asp Net在 MVC Asp Net 中使用 Chosen jQuery 插件
【发布时间】：2018-05-06 06:33:41
【问题描述】：

我想在 AspNet 项目中安装 Chosen javascript jquery 插件。我已经按照这个步骤：

1- 在 Scripts 目录下我已经添加了所有的 javascript 文件，如下图所示

2-在我添加的Index.cshtml中

<head>
    <meta charset="utf-8">
    <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
    <link rel="stylesheet" href="~/Scripts/chosen_v1.8.2/docsupport/style.css">
    <link rel="stylesheet" href="~/Scripts/chosen_v1.8.2/docsupport/prism.css">
    <link rel="stylesheet" href="~/Content/chosen.css">
    @*<meta http-equiv="Content-Security-Policy" content="default-src &apos;self&apos;; script-src &apos;self&apos; https://ajax.googleapis.com; style-src &apos;self&apos;; img-src &apos;self&apos; data:">*@
</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/chosen_v1.8.2/chosen.jquery.js" type="text/javascript"></script>
<script src="~/Scripts/chosen_v1.8.2/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>

 <script src="~/Scripts/chosen_v1.8.2/docsupport/init.js" type="text/javascript" charset="utf-8"></script>

然后我添加了多选 ui，但它仍然不起作用。我总是得到下图中的用户界面：

有什么建议吗？提前致谢。

【问题讨论】：

更改脚本顺序，因为我遇到了问题，有时 Jquery 应该在任何其他库之前加载
请添加您的 HTML 标记，我们需要看看您的标准 <select> 元素是什么样的
你的脚本似乎漂浮在无人区，要么放在你的头上，要么放在你的身体里，而不是放在它们之间（但不确定这是否会有所不同）

标签： javascript jquery asp.net asp.net-mvc

【解决方案1】：

感谢您的回答，现在正在工作。我想逐步分享我遵循的程序：

从https://github.com/harvesthq/chosen 网站下载 Chosen，在我的例子中是 selected_v1.8.2
在 ASP-NET 项目中创建并填充目录，如下所示

Scripts/chosen 将 \chosen_v1.8.2 中的所有文件放在这里 Scripts/chosen/docsupport 将 \chosen_v1.8.2\docsupport 中的所有文件放在这里

5- 更新 /App_Start/BundleConfig.cs

//添加选择的脚本

bundles.Add(new ScriptBundle("~/bundles/chosen").Include(
    "~/Scripts/chosen/chosen.jquery.min.js",
    "~/Scripts/chosen/chosen.jquery.js",
    "~/Scripts/chosen/docsupport/prism.js",
    "~/Scripts/chosen/docsupport/init.js"

更新 /shared/Layout.cshtml

在 jquery 之后添加选择的包

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/chosen")

更新 /shared/Layout.cshtml 后添加 jquery 选择的包

5.用一些示例更新 index.cshtml

...

  <script type="text/javascript">
        $(document).ready(function () {
            $("select").chosen();
            $("chosen-select-width").chosen();

       });
    </script>

<h2><a name="custom-width-support" class="anchor" href="#custom-width-support">Select the shop</a></h2>
<div class="side-by-side clearfix">
    <p>Using a custom width with Chosen is as easy as passing an option when you create Chosen:</p>
    <pre><code class="language-javascript"> $(".chosen-select").chosen({width: "95%"}); </code></pre>
    <div>
        <em>Multiple Select Shop id</em>
        <select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select-width" tabindex="16">
            <option value=""></option>
            <option selected>Test1</option>
            <option>Test2</option>
            <option>Test3</option>
        </select>
    </div>
</div>

7 享受

【讨论】：

【解决方案2】：

您必须在所选组件上实际初始化所选库。这最好在文档就绪事件中完成，以确保库已加载。

例如在你的 html 代码中添加这个：

<script>
    $(function() {
        $("select").chosen();
    });
</script>

【讨论】：

不确定谁对您的答案投了反对票，但我相信它是正确的。但是，如果您要在问题中提及 ready() 方法，您应该将其添加到您的代码 sn-p 中。标签中也不包含 OP 的 JS 脚本，尽管奇怪的是它们的 css 链接是。
@charlietfl 很公平，但这对其他人来说并不是很明显。