在MVC Asp Net中使用选择的jQuery插件 [英] Use Chosen jQuery plugin in MVC Asp Net

查看:69
本文介绍了在MVC Asp Net中使用选择的jQuery插件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我要在AspNet项目中安装选择的javascript jquery插件.我已按照以下步骤操作:

I would to install Chosen javascript jquery plugin in a AspNet project. I have followed this step:

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

1- under Scripts directory I have added all the javascript file as the image below

2-在我添加的Index.cshtml中

2- in the Index.cshtml I have added

<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,但仍然无法正常工作.我总是在下图中得到用户界面:

Then I added the multiselection ui but it still doesn't work. I get always the ui in the image below:

有什么建议吗? 预先感谢.

Any suggestion? Thank in advance.

推荐答案

您必须在选择组件上实际初始化所选的库.最好在文档准备事件中完成此操作,以确保已加载库.

You have to actually initialize the chosen library on your select component. This is best done in the document ready event to make sure the library is loaded.

例如,将其添加到您的html代码中:

By for example adding this in your html code:

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

这篇关于在MVC Asp Net中使用选择的jQuery插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆