Sangram Singh Sangram Singh - 1 month ago 12
Javascript Question

Chosen jQuery plugin not functional.

Using Chosen version 1.0.0
I included the following files

link(href='css/chosen.css', rel="stylesheet", type="text/css");
script(src='js/chosen.jquery.min.js')
script.
$(".chosen-select").chosen()

body
select(data-placeholder="Choose a country...", multiple style="width:350px;" ).chosen-select
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>


The above code gives a disfunctional
select box
The above display is same as

select(multiple, style="width:350px;")
<option value=""></option>
<option value="United States">United States</option>


Upon analysis I see, that both
chosen.css
and
chosen.jquery.min.js
have no class
chosen-select
I am using jQuery version
v1.10.2
Also I am loading jQuery as the first file on the page to avoid conflict.

Thanks for helping.

Answer

Adding

script.
        $(document).ready(function(){
            $(".chosen-select").chosen()
        });

Instead of just $(".chosen-select").chosen() makes it work!

Comments