jQuery Star Rating using Select Option dropdown

Question

I need a little help here... last several hours been trying to figure this out, and getting nowhere.

I found this simple jQuery Star rating system that i'd like to use, the original coding was using an INPUT field but I changed it to being used with a Select Option Dropdown. When it's displayed on the left you have the dropdown and to the right you have the default STARS. Now when you click on the STARS, the dropdown options change... which is good, that part I want to keep, However when you use the actual Dropdown the stars wont change... here is the coding...

<select name="my_input" id="rating_simple">
    <option value="0" selected="selected"></option>
    <option value="1">Poor</option>
    <option value="2">Below Average</option>
    <option value="3">Average</option>
    <option value="4">Good</option>
    <option value="5">Excellent</option>
</select>

JavaScript

$(function() {
    $("#rating_simple").webwidget_rating_simple({
        rating_star_length: '5',
        rating_initial_value: '',
        rating_function_name: '',
        directory: 'rating-system/'
    });
});

Thanks! Any help would be appreciated!

correct your html structure. You not put drop down in body section. — Harshit Tailor, May 23 '13 at 06:16
here is a jsFiddle http://jsfiddle.net/JHWebDesigner/F7bjH/ Only problem is on the jsFiddle the stars aren't showing up... look at the demo link above you can see it more in action. — Jonathan Hollins, May 23 '13 at 06:33
@JonathanHollins See my answer, added a working fiddle (changed the script code to see the stars, cange it according to your needs) — Irvin Dominin, May 23 '13 at 06:47
There are [much better solutions](http://stackoverflow.com/a/13176213/155813) for simple star rating. Check [this fiddle](http://jsfiddle.net/mihirgokani007/xd7b5/) for a quick example of [raty](http://wbotelhos.com/raty/). — mg007, May 23 '13 at 07:02

score 1 · Accepted Answer · answered May 23 '13 at 06:46

I can't find any built-in function to set the value; I made up a little script to handle that using the change select handler:

$('#rating_simple').change(function () {
    $(".webwidget_rating_simple > li").css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)')

    $(".webwidget_rating_simple > li").slice(0,this.value).css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)')

});

I set to no starred all the option, and then with the slice method set to starred the selection.

Working fiddle : http://jsfiddle.net/IrvinDominin/eeG86/

Important note: to let the fiddle works, I changed the script code to see the stars, change the code according to your needs

For completeness I think this is the project site: http://www.loocasdance.pl/lib/ranking/rating.html

Edward You ROCK!...haha.. Thanks so much!... I tried something similar to what you wrote but somehow i was getting multiple stars...hahah. Thanks again! — Jonathan Hollins, May 23 '13 at 06:53

score 0 · Answer 2 · answered May 23 '13 at 07:01

You can try this one also -

$('#rating_simple').change(function(){

        var rating = $(this).val();
        $('.webwidget_rating_simple li').css({
                'background-image' : 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)'
            });
        $('.webwidget_rating_simple li:lt('+rating+')').css({
                'background-image' : 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)'
            });

    });

jsFiddle - http://jsfiddle.net/Y4Nyu/

score 0 · Answer 3 · answered May 23 '13 at 07:12

I modified the plugin that wasn't made to listen to select change :

(function (a) {
    a.fn.webwidget_rating_simple = function (p) {
        var p = p || {};
        var b = p && p.rating_star_length ? p.rating_star_length : "5";
        var c = p && p.rating_function_name ? p.rating_function_name : "";
        var e = p && p.rating_initial_value ? p.rating_initial_value : "";
        var d = p && p.directory ? p.directory : "images";
        var f = "";
        var g = a(this);
        b = parseInt(b);
        init();
        g.change(function(){var r = a(this).val()-1;f=""; g.next('ul').children('li').eq(r).trigger('mouseenter');f=r+1; g.next('ul').children('li').eq(r).trigger('mouseenter').trigger('mouseleave')});
        g.next("ul").children("li").hover(function () {
            $(this).parent().children("li").css('background-image', 'url(' + d + '/nst.gif)');
            var a = $(this).parent().children("li").index($(this));
            $(this).parent().children("li").slice(0, a + 1).css('background-image', 'url(' + d + '/sth.gif)');
        }, function () {});
        g.next("ul").children("li").click(function () {
            var a = $(this).parent().children("li").index($(this));
            f = a + 1;
            alert(f);
            g.val(f);
            if (c != "") {
                eval(c + "(" + g.val() + ")")
            }
        });
        g.next("ul").hover(function () {}, function () {
            if (f == "") {
                $(this).children("li").css('background-image', 'url(' + d + '/nst.gif)').css('background-color', '#0f0')
            } else {
                $(this).children("li").css('background-image', 'url(' + d + '/nst.gif)').css('background-color', '#0f0');
                $(this).children("li").slice(0, f).css('background-image', 'url(' + d + '/sth.gif)').css('background-color', '#f00')
            }
        });

        function init() {
            $('<div style="clear:both;"></div>').insertAfter(g);
            g.css("float", "left");
            var a = $("<ul>");
            a.attr("class", "webwidget_rating_simple");
            for (var i = 1; i <= b; i++) {
                a.append('<li style="background-image:url(' + d + '/nst.gif)"><span>' + i + '</span></li>')
            }
            a.insertAfter(g);
            if (e != "") {
                f = e;
                g.val(e);
                g.next("ul").children("li").slice(0, f).css('background-image', 'url(' + d + '/sth.gif)')
            }
        }
    }
})(jQuery);

$(function() {

    $("#rating_simple").webwidget_rating_simple({

    rating_star_length: '5',

    rating_initial_value: '',

    rating_function_name: '',

    directory: 'rating-system/'

    });

});

http://jsfiddle.net/F7bjH/5/

Added background colors for testing

jQuery Star Rating using Select Option dropdown

3 Answers3