j使用“选择选项”下拉列表查询多星评级系统

jQuery Multiple Star Rating system using Select Option dropdown

本文关键字：查询 系统 下拉列表 使用 选择 选项 选择选项      更新时间：2023-09-26

我找到了我想使用的这个简单的jQuery星级评级系统，我正在我的网站上遵循 http://jsfiddle.net/代码，它适用于一个星级评级系统而不是多个星级评级系统，我在我的网站上的一个页面上有多个星级评级系统。

这是jsfiddle链接：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>

在上面的链接中，我喜欢jQuery下拉菜单，但这仅适用于一页上的一个评级系统。我的问题是我在一页上有多个星级评级系统。

您的第一个问题是您使用 ID 的事实，让我们更改每个select的标记以使用类：

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

现在我们需要更新你的jQuery来反映变化（使用.而不是#）。

最后，在您的change方法中，您使用 $(".webwidget_rating_simple") 引用星级评定系统，但现在我们在 DOM 中有多个这样的系统，因此我们需要引用与您正在更改的当前select相邻的那个，使用 $(this).next(".webwidget_rating_simple") .

所以最后，你的jQuery将看起来像这样：

编辑我们实际上需要单独设置每个下拉列表，这是为了防止插件中的问题，如果您单击一颗星，该问题将选择所有下拉列表（最好更改调用代码而不是更新插件）。

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

演示

试试这个。 使用不同的 ID 和名称。

<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>

相关文章：