CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3932382
user3932382

Reputation: 35

jQuery Multiple Star Rating system using Select Option dropdown

I found this simple jQuery Star rating system that I'd like to use, I am following http://jsfiddle.net/ code in my website and it's working fine for one star rating system not for multiple and I have multiple star rating system on one page in my website.

Here is jsfiddle link: http://jsfiddle.net/IrvinDominin/eeG86/ 

<select name="my_input" id="rating_simple">
                    <option value="0" selected="selected">---Select---</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>

 <select name="my_input" id="rating_simple">
                    <option value="0" selected="selected">---Select---</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>

 <select name="my_input" id="rating_simple">
                    <option value="0" selected="selected">---Select---</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>

In above link I had like jQuery drop down but this is working only for one rating system on one page. My problem is I have multiple star rating system on one page.

Upvotes: 1

Views: 1757

Answers (2)

Mathew Thompson
Mathew Thompson

Reputation: 56429

Your first problem is the fact that you're using IDs, let's alter your markup for each select to use a class:

<select name="my_input" class="rating_simple">

Now we need to update your jQuery to reflect the change (using . instead of #).

Finally, in your change method, you refer to the star rating system using $(".webwidget_rating_simple"), but now we have multiple of these in the DOM, so we need to refer to the one adjacent to the current select that you're changing, using $(this).next(".webwidget_rating_simple").

So finally, your jQuery will look like this:

EDIT we actually need to setup each dropdown individually, this is to prevent the issue within the plugin that will select all dropdowns if you click on one star (it's better to alter the calling code than it is to update the plugin).

$(".rating_simple").each(function () {
    $(this).webwidget_rating_simple({
        rating_star_length: '5',
        rating_initial_value: '',
        rating_function_name: ''
    });
 });

$('.rating_simple').change(function () {
    $(this).next(".webwidget_rating_simple").children("li").css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)');
    $(this).next(".webwidget_rating_simple").children("li").slice(0,this.value).css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)');
});

DEMO

Upvotes: 1

RDY
RDY

Reputation: 683

Try this. use different id and name. 

<select name="my_input1" id="rating_simple1">
                    <option value="0" selected="selected">---Select---</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>

 <select name="my_input2" id="rating_simple2">
                    <option value="0" selected="selected">---Select---</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>

 <select name="my_input2" id="rating_simple2">
                    <option value="0" selected="selected">---Select---</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>

Upvotes: 0

Related Questions