jQuery selectbox plugin

For use with Rails 3.1 asset pipeline

Install

Add to your Gemfile

gem 'jquery-rails'
gem 'selectbox_rails'

bundle install

Edit app/assets/javascripts/application.js and add

//= require jquery
//= require selectbox

and if you want the default styles, in app/assets/stylesheets/application.css add

/*
*= require_self
*= require selectbox
*/

You don't have to use the stylesheet provided by this plugin. Selectbox rewrites the select element as an unordered list that looks like something like this...

<div class='sbHolder'>
  <ul class='sbOptions'>
    <li>
      <a></a>
    </li>
  </ul>
</div>

So it's very easy to style.

Usage

// default
$('select').selectbox();

// with options
$("#country_id").selectbox({
  onOpen: function (inst) {
    //console.log("open", inst);
  },
  onClose: function (inst) {
    //console.log("close", inst);
  },
  onChange: function (val, inst) {
    $.ajax({
      type: "GET",
      data: {country_id: val},
      url: "ajax.php",
      success: function (data) {
        $("#boxCity").html(data);
        $("#city_id").selectbox();
      }
    });
  },
  effect: "slide"
});


$(".nova").selectbox({
  effect: "fade"
});

$("#vehicle_id").selectbox({
  speed: 400
});

Examples found http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

Credits

The jQuery code was written by Dimitar Ivanov

Project links: http://code.google.com/p/select-box/