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 aselect
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
1 Answer
Reset to default 7From 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.