Question

I have tried the rateit plugin but this does not seem to work correctly with the <option selected="selected">

UPDATE:
Updated the JSfiddle to the latest jquery and now I have the issue back where it is only displaying 4 stars when I have 5 options in the select?

I have been looking for a couple of hours now to find a rating plugin which:

1. Doesn’t require extra HTML.
2. Displays the option text on hover of each each using the title attribute.
3. Only works with full star rating.

HTML

<select class="test" id="rating1" name="Rating">
    <option value="1">Poor</option>
    <option value="2">Fair</option>
    <option value="3" selected="selected">Good</option>
    <option value="4">Very Good</option>
    <option value="5">Excellent</option>
</select>

Answer 1

You need to make the selectbox update the rating value. Add:

$('#rating1').change(function() {
  $('div#rating2').rateit('value',$(this).val());
});

See example.

Edit:

RateIt requires jQuery 1.6.0+, which is why updating the jQuery version causes the selectbox to (properly) disappear. Have a look at this fiddle to see if it meets your needs. This will “progressively enhance” the selectbox so that users without JavaScript enabled will still be able to use the select, and those with JS enabled will get the nicer version.

If you want the backing field to be shown, you have to toggle it after the rateit() call. Also, to prevent the “reset” option from showing up, you need to set another data attribute and extend the select a bit:

Example.