#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 6:40


Gemfilesource 'https://rails-assets.org' 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(@users.map{ |user| [user.full_name, user.id, 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 almost 3 years ago on Javascript Select Form Fields with Chosen :

I personally prefer Selectize to Chosen. You can read about the differences here: http://stackoverflow.com/questions/13575531/what-are-the-differences-between-chosen-and-select2

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

kobaltz PRO said almost 3 years ago on Javascript Select Form Fields with Chosen :

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