最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to install and work with jQuery Chosen plugin? - Stack Overflow

programmeradmin4浏览0评论

I downloaded jQuery's Chosen plugin, copied the chosen.min.css and chosen.jquery.min.js files in my project.

Copied link paths in my CSHTML:

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

I have a dropdown list in my CSHTML, somewhat this way:

<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>

My jQuery:

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

But nothing as expected by 'Chosen' happens... Where am I going wrong?

Thanks in advance.

I downloaded jQuery's Chosen plugin, copied the chosen.min.css and chosen.jquery.min.js files in my project.

Copied link paths in my CSHTML:

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

I have a dropdown list in my CSHTML, somewhat this way:

<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>

My jQuery:

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

But nothing as expected by 'Chosen' happens... Where am I going wrong?

Thanks in advance.

Share Improve this question edited May 29, 2017 at 17:23 Badacadabra 8,5177 gold badges31 silver badges54 bronze badges asked May 7, 2015 at 12:17 Uzair KhanUzair Khan 2,9707 gold badges36 silver badges53 bronze badges 5
  • Do you realize that chosen needs a select element? – Alex Char Commented May 7, 2015 at 12:19
  • And did you include jQuery script? – Regent Commented May 7, 2015 at 12:19
  • $.as() ? Can't find that in jQuery's doc, never seen that. What does your console say? – Jeremy Thille Commented May 7, 2015 at 12:20
  • @Alex-Can it not work in my project without select? – Uzair Khan Commented May 7, 2015 at 12:21
  • 2 No, Chosen acts on select elements. First line of its doc : "Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly." – Jeremy Thille Commented May 7, 2015 at 12:23
Add a ment  | 

1 Answer 1

Reset to default 7

From the chosen you need a select element:

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

And after in js:

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

Check this fiddle too.

发布评论

评论列表(0)

  1. 暂无评论