Question

I’m using RubyOnRails, so all my stylesheets should be including automatically.

I want to make my dropdown lists more user friendly, and I chose Chsen plugin.

Here is my code of page:

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/chosen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/chosen.jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/chosen.jquery.min.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

So javascripts and stylesheets are included, yes ?

My HTML code(from exmple):

       <select tabindex="1" style="width:350px;" data-placeholder="Choose a Country">
            <option value=""></option> 
            <option value="United States">United States</option> 
            <option value="United Kingdom">United Kingdom</option> 
            <option value="Afghanistan">Afghanistan</option> 
            <option value="Albania">Albania</option>                
          </select>

And in my application.js file:

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

No errors in Google Console, but in my page it is showing as default select list. Why ?

Answer 1

You need to add a “chzn-select” class to your select tag. Your js code is applying the chosen plugin to any element it finds that uses that class. Here is what your select tag should look like:

<select class="chzn-select" tabindex="1" style="width:350px;" data-placeholder="Choose a Country">
    <option value=""></option> 
    <option value="United States">United States</option> 
    <option value="United Kingdom">United Kingdom</option> 
    <option value="Afghanistan">Afghanistan</option> 
    <option value="Albania">Albania</option>                
</select>