Creating a Star Rating system with jQuery using a dropdown menu for multiple selections

Recently, I came across a simple jQuery Star rating system that I want to implement on my website. I have been following the code from http://jsfiddle.net/, and it works perfectly for one star rating system. However, I have multiple star rating systems on one page of my website.

Here is the link to the jsfiddle example: 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>

The jQuery drop down in the above link only supports one rating system per page. My challenge lies in having multiple star rating systems on a single page.

Answer №1

The main issue here is the usage of IDs in your markup. Let's make a change by using classes for each select instead:

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

Update your jQuery code to reflect this change (using . instead of #).

Furthermore, when referring to the star rating system in your change method, note that there are multiple instances on the page. To target the specific one related to the current select being changed, use

$(this).next(".webwidget_rating_simple")
.

Therefore, your updated jQuery will be as follows:

UPDATE: It's necessary to configure each dropdown individually to avoid issues with the plugin selecting all dropdowns upon clicking one star. It's better to adjust the calling code rather than modifying the plugin itself.

$(".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)');
});

Check out the DEMO

Answer №2

Give this a shot. Use unique identifiers for each input field.

<select name="my_input1" id="rating_unique1">
                    <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_unique2">
                    <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_input3" id="rating_unique3">
                    <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problems with adjusting image sizes on different devices

img { width: 100%; height: auto; } The above code adjusts the width of the images to match the width of the page, while maintaining the original aspect ratio with the height. However, if we were to use the following: img { width: auto; h ...

Can TypeScript and JavaScript be integrated into a single React application?

I recently developed an app using JS react, and now I have a TSX file that I want to incorporate into my project. How should I proceed? Can I import the TSX file and interact with it within a JSX file, or do I need to convert my entire app to TSX for eve ...

Alter the position of the anchor object in the center using JavaScript upon page load

When my page loads, I want to automatically jump to a specific anchor tag and ensure that the anchor object is centered in the window. Initially, I implemented a basic function to achieve this: <body onload="goToAnchor();"> <script type="text/ja ...

Manipulate JSON data in a Node.js loop

Currently, I am working on a monitoring system that will indicate on a website whether a server is up or down. I have experimented with various methods such as regex and replacement to modify the JSON file. My main objective is to dynamically change the "s ...

Update the content of the widget

Currently, I am utilizing the following script to display NBA standings: <script type="text/javascript" src="https://widgets.sports-reference.com/wg.fcgi?script=bbr_standings&amp;params=bbr_standings_conf:E,bbr_standings_css:1&amp"></sc ...

What is the best way to initiate an AJAX request and retrieve the requested data?

How do I set up my ajax function? $(function() { $("form#new_user").click(function(e) { e.preventDefault(); var dataString = $('#new_user').serialize(); $.ajax({ type: 'POST', url: '/user', da ...

How can TypeScript objects be serialized?

Is there a reliable method for preserving type information during JSON serialization/deserialization of Typescript objects? The straightforward JSON.parse(JSON.stringify) approach has proven to have several limitations. Are there more effective ad-hoc sol ...

Passing variable as a value in a POST request to interact with PHP and MySQL

After retrieving a random row from a MySQL server using PHP, I am encountering an issue with transferring the ID correctly to update.php for user feedback. The updating process is not functioning as expected on the server. I need help identifying the error ...

Stock Chart that resembles the functionality of Google's popular line chart feature

Can anyone recommend a Javascript or SVG chart library that has a style similar to a Google Chart? I have been searching without much luck and would appreciate some guidance on how to achieve a similar look. I've looked into the Google Visualization ...

ul background transparency only works with absolute positioning if using a Transparent PNG

Encountering a strange issue was the order of the day, as I found myself faced with an unordered list featuring a background image in the form of a semi-transparent PNG. To my surprise, the transparency only became visible once I designated the unordered l ...

Changing the image source attribute with jQuery

I'm attempting to create a function where the image changes based on each click. Essentially, I want alternating clicks to display different image sources, similar to a slideToggle effect. While researching, I found that some individuals utilize toggl ...

react-datepicker displaying error message "Preventing default action not possible within a passive event listener invocation"

I've integrated the react-datepicker library in portal mode. While it functions well on browsers, I encounter an error when using mobile browser mode. An issue arises stating: "Unable to preventDefault inside passive event listener invocation" Des ...

What is the process for extracting specific text from a web page source using Python with Selenium?

The following is the HTML source code: <div class="dropdown-popup"> <a href="/integrations/sources/" class="dropdown-item">Sources</a> <a href="/integrations/destinations/" cla ...

The performance of the Ionic app is significantly hindered by lagging issues both on Google

After starting to work with the ionic framework, I noticed a significant change in performance when testing an android app on Chrome for the first time. It was fast and responsive until I added a button that led to a screen with navigation bars, side men ...

Hiding the keypad on an Android device in an Ionic app when user input is detected

I am currently utilizing the syncfusion ej2 Calendar plugin for a datepicker, but I am only using options such as selecting ranges like today, 1 month, or last 7 days from the plugin itself. The plugin provides dropdown options when the calendar is trigger ...

Using data attributes for assigning them to a div container - a complete guide!

As I venture into the world of HTML5 and JS, I'm facing some challenges in finding success. My goal is to dynamically load data attributes from "li" elements into a div container, which will provide additional information for a slide within the flexs ...

Conceal a list of items within a div that has a particular class

This is a sample of my HTML code: <div class="row"> <div class="col-md-12"> <div class="scrollbox list"> <ul class="list-unstyled"> <li id="articulate.flute">articulate flut ...

jqGrid is throwing an error: undefined is not recognized as a function

Currently, I am in the process of trying to display a basic grid on the screen. Following the instructions provided in the jqGrid wiki, I have linked and created scripts for the required files. One essential css file, jquery-ui-1.8.18.custom.css, was missi ...

Easily conceal and reveal elements using Svelte in a straightforward manner

I'm looking for a straightforward method to hide and show an element using a button in Svelte. Can someone guide me on how to achieve this? Additionally, I'm curious if it's easier to accomplish this task with vanilla JavaScript. ...

I'm having trouble getting FlowType.js to function properly

I have added the following code just before the closing </body> tag, but unfortunately, it seems like the type is not changing as expected. I am struggling to identify what mistake I might be making. Check out FlowType.JS on GitHub View the code on ...