使用选择选项下拉菜单进行jQuery星级评级

Question

我需要一点帮助...在过去的几个小时里，我一直在尝试解决这个问题，但一无所获。

我找到了这个我想使用的简单的jQuery星级评分系统，最初的编码是使用一个输入字段，但我将其改为与选择选项下拉菜单一起使用。当它显示在左边时，你会看到下拉列表，而在右边，你会看到默认的星号。现在，当您单击星号时，下拉选项会发生变化...这很好，我想保留这一部分，但是当你使用实际的下拉列表时，星号不会改变……这是代码。

<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/'
    });
});

谢谢!任何帮助都将不胜感激！

Answer 1

我找不到任何内置函数来设置值；我编写了一个小脚本来使用change选择处理程序来处理这个问题：

$('#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)')

});

我将所有选项设置为no，然后使用slice方法将所选内容设置为星形。

工作小提琴：http://jsfiddle.net/IrvinDominin/eeG86/

重要提示：为了让小提琴工作，我更改了脚本代码以查看星星，根据您的需要更改代码

为了完整性，我认为这是项目站点：http://www.loocasdance.pl/lib/ranking/rating.html

Answer 2

你也可以试试这个-

$('#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/

Answer 3

我修改了不是用来监听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/

新增测试背景色