如何安装和使用 jQuery Chosen 插件？

Question

我下载了jQuery的Chosen插件，复制了chosen.min.css和chosen.jquery.min.js我项目中的文件。

在我的 CSHTML 中复制了 link 个路径：

<link href="~/Content/Bootstrap/css/chosen.min.css" rel="stylesheet" />
<script src="~/Content/Bootstrap/js/chosen.jquery.min.js" type="text/javascript"></script>

我的 CSHTML 中有一个下拉列表，有点像这样：

<div class="col-md-4">
     <div class="btn-group pull-left">
          <button type="button" class="btn dropdown-toggle btn-md set-border" data-toggle="dropdown" id="dropdownbtn">
              <span class="spn-action">Add new criteria</span><span class="caret" id="caretAdjustment"></span>
          </button>
          <ul class="dropdown-menu" id="chzn-select" role="menu">
              @foreach(var item in Model)
              {
                 <li onclick="ShowMessage('@item.Criteria')"><a href="#">@item.Criteria</a></li>
              }  
           </ul>
      </div>
</div>

我的jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $("#chzn-select").as(Chosen).chosen();
        });
    });
</script>

但是没有发生 'Chosen' 预期的事情...我哪里出错了？

提前致谢。

Answer 1

从 chosen 你需要一个 select 元素：

<select data-placeholder="Choose a country..." style="width:350px;" multiple class="chosen-select">

在 js 之后：

$(".chosen-select").chosen();

也检查此 fiddle。

如何安装和使用 jQuery Chosen 插件？

How to install and work with jQuery Chosen plugin?

javascript

jquery

razor

jquery-chosen