Simple Select Based Star Rating Plugin with jQuery - ComboStars

ComboStars is a tiny, fast jQuery plugin used to transform a select list into a basic star rating system.

How to use it:

1. Import jQuery library and the jQuery combostars plugin into your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src/jquery.combostars.js"></script>

2. Create a normal select list for the rating system.

<select id="combostar">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

3. Call the plugin on the select list and done.

$('#combostar').combostars();

4. Customize the rating stars.

$('#combostar').combostars({

starUrl: 'img/stars.png',
starWidth: 16,
starHeight: 15,
clickMiddle: true

});

5. change() event to handle a click on a rating star.

// output the value of the select list.
$('#combostar').on('change', function () {
  $('#starcount').text($(this).val());
});

Change log:

2015-01-20

• Add minified js and set hover mouse to pointer

---

This awesome jQuery plugin is developed by parsonsj. For more Advanced Usages, please check the demo page or visit the official website.