Checkbox Select Form Element

I have a problem with the following HTML:

<select multiple='true'>

     <option value ="volvo">Volvo</option>

     <option value ="saab">Saab</option>

     <option value ="opel">Opel</option>

     <option value ="audi">Audi</option>

</select>

It generates a select box, that's fine. But for whatever reason all user agents generate it the exact same way. You must hold down CTRL to choose multiple selections. This does not seem very user friendly. Especially when you have many selections and most of them scroll out of the select frame. If you forget to hold down CTRL there goes all of your selections.

I saw a great alternative to this on Monster.com They created a select menu that has checkboxes inside for each option. Just click the checkbox of the item you want. No more CTRL holding. I decided to try to recreate this behavior in Rails.

The result is the plugin checkbox-select Right now it is in beta but I think ready for general release for people to use. To install please checkout via svn into your plugin directory of yoru project:

cd ./vendor/plugins
svn checkout http://checkbox-select.googlecode.com/svn/trunk/ checkbox-select

Here is an excerpt from the README

== SETUP ==
After installing this plugin you must copy the javascript and
stylesheet to the proper locations:

cp ./my_project/vendor/plugin/checkbox-select/lib/checkbox-select.js \
./my_project/public/javascripts/

cp ./my_project/vendor/plugin/checkbox-select/lib/checkbox-select.css \
./my_project/public/stylesheets/

Now you must copy the downarrow image...

mkdir ./my_project/public/images/checkbox-select \
cp ./my_project/vendor/plugin/checkbox-select/lib/downarrow.png \
./my_project/public/images/checkbox-select/

Once this is done you must include the javascript and stylesheet in
your layout:

./my_project/app/views/layouts/my_layout.html.erb
.....
<%= stylesheet_link_tag "checkbox-select" %>
<%= javascript_include_tag "prototype", "checkbox-select" %>

Note that the checkbox-select javascript file was included
*after* the prototype javascript file. Prototype is a dependency
of checkbox-select.

== PREPARE YOUR MODEL == 
Now that everything is included you must serialize the model attribute
that you will be using with the checkbox-select:

./my_project/app/models/my_model.rb
class MyModel < ActiveRecord::Base
   serialize :my_field
end

== USAGE ==
Once all that is done you can now use the plugin. Here is an example:

./my_prject/app/views/my_models/edit.html.erb
<% form_for @my_model do |f| %>
   <%= f.checkbox_select :my_field, ["Choice 1", "Choice 2", "Choice 3"], @my_model.my_field, {} %>
<% end %>

After this is done you should have something similar to this on your site:

Or if you want to don't want a drop-down box you can set the ':multiple => true' option as described in the README:


Please leave any questions in the comments and I'll try to answer them all.