Javascript Select Form Fields with Chosen

#76 Javascript Select Form Fields with Chosen


Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Learn how to use Chosen in a few different ways in this episode; Rails form builder and Simple Form.
rails form javascript ajax view


Gemfilesource '' do
  gem 'rails-assets-chosen'
  gem 'rails-assets-chosen-bootstrap' # if using bootstrap
application.js//= require chosen


function chosen_init() {
      var user = $('option:selected',this);
      var user_url = user.attr('data-url');

$(document).on('turbolinks:load', function(){chosen_init()});
application.css# if using Bootstrap
  *= require chosen-bootstrap

# otherwise, the standard default

 *= require chosen


   <%= select_tag "users", 
          options_for_select({ |user| [user.full_name,, data: { url: edit_user_path(user) }]}), 
          class: 'chosen-select' %>


<div id='user_form'></div>
users/edit.js.erb$('#user_form').html('<%= j render partial: "form" %>');
// $(".chosen-select").chosen();
users/_form.html.erb<%= f.association :pets, as: :select, multiple: true, input_html: { class: 'chosen-select' } %>

ToniTornado said 14 days ago:

I personally prefer Selectize to Chosen. You can read about the differences here:

But the usage is very similar and watching the great tutorial helps with using any of the two :-)

kobaltz said 13 days ago:

That's strange that a lot of people have such complaints about Chosen. I've been using it for quite some time and never experienced any of the problems that they were describing. I had used Select2 in the past and have nothing against it. Both JS Packages just seem to work. :)

However, I do agree that this episode could have just as easily been swapped with Select2 with minor changes.

Login to Comment