Star Rating Plugin for jQuery

What

An easy to use rating control. It takes a normal select box, and turns it into a rating that your users can click on. The select box is preserved so you can still bind on change, get, and set the value in the rating control. The image is controlled with CSS and a simple gif, so you can make it look like anything you need.

Download

Download (Moved to GitHub)
Download

Example

Here is a sample default rating control with no options.

Did not like Ok Liked Loved!

Source

<select class="rating">
    <option value="0">Did not like</option>
    <option value="1">Ok</option>
    <option value="2" selected="selected">Liked</option>
    <option value="3">Loved!</option>
</select>

$(".rating").rating();

That’s it!

The select box is now replaced with the rating control. Each option you put in the select box is turned into a star, so you can easily have as many stars as you want. The value you set is the value that is returned for the selected star. The text becomes the title on the star.

You can turn the cancel button on and off, and change the value of the cancel button by passing it when you create the rating control.
$(".rating").rating({showCancel: true, cancelValue: null,})

You can make the control readonly by setting <select disabled="disabled">

Available Options:

• showCancel: true : Should the cancel button be shown?
• cancelValue: null : If cancel button is shown, what should it’s value be?
• startValue: null : If no property has the ‘selected’ attribute, what value should be displayed?

Get Value

This can be Anything

Click for Value
Serialize

Source

<select name="myRating" class="rating" id="serialStar">
    <option value="0">Did not like</option>
    <option value="1">Ok</option>
    <option value="2">Liked</option>
    <option value="3">Loved!</option>
</select>
<span id="seralString">Click for Value</span>
<button onclick="$('#seralString').text( $('#serialStar').val() );">Serialize</button>

//Turn the Select into a rating
$(".rating").rating();
//Action on button click
$('#seralString').text( $('#serialStar').val() );

Bind $.serialize() On Change

Of course you don’t have to call $.serialize() here, you can call anything you want. It’s just a normal event. You even have access to the value with $("#serialStar2").val()!

ALright Ok Getting Better Pretty Good Awesome

Just click and I’ll change.

Source

<select name="myRating" class="rating" id="serialStar2">
    <option value="1">ALrighte</option>
    <option value="2">Ok</option>
    <option value="3">Getting Better</option>
    <option value="4">Pretty Good</option>
	<option value="5">Awesome</option>
</select>
<span id="serialString2">serialize that star rating!</span>

//Turn the select box into rating controls
$(".rating").rating();

//Show that we can bind on the select box
$("#serialStar2").bind("change", function(){
	$('#serialString2').text( $('#serialStar2').serialize() );
});

Setting the Value

There is one slight twist. In order to set the value programmatically, you have to set it, then trigger the change event on the select box.

ALright Ok Getting Better Pretty Good Awesome

Set to ‘Pretty Good’

<select name="myRating" class="rating" id="serialStar2">
    <option value="1">ALrighte</option>
    <option value="2">Ok</option>
    <option value="3">Getting Better</option>
    <option value="4">Pretty Good</option>
	<option value="5">Awesome</option>
</select>
<button onclick="$('#star3').val(4).change()"&gtSet to 'Pretty Good'</button&gt

//Turn the select box into rating controls
$(".rating").rating();

//Set the value to 4, then trigger change to update the rating.
$('#star3').val(4).change();

Bugfixes

• IE Loading Problems
• IE CSS Hover Over shows the wrong image

Todo

• Allow disabling of the control
• Allow global settings
• Way to set the value without firing the change event
• If no selected attribute is present, start with all stars blank