Question

我想在AspNet项目中安装Chosen javascript jquery插件。我遵循了这一步：

1-在Scripts目录下我已将所有javascript文件添加为下面的图像

enter image description here

在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，但它仍然不起作用。我总是在下面的图片中得到ui：

enter image description here

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

Answer 1

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

例如，在您的html代码中添加：

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

Answer 2

谢谢你的回答，现在正在努力。我想逐步分享我所遵循的程序：

下载选自网站https://github.com/harvesthq/chosen，我的案例为selected_v1.8.2
创建并填充ASP-NET项目中的目录，如下所示

脚本/选择放在\ chosen_v1.8.2中的所有文件脚本/ selected / docsupport将所有文件放在\ chosen_v1.8.2 \ docsupport
中
5- Update / 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享受

在MVC Asp Net中使用选择的jQuery插件

2 个答案: