使用select选项的jQuery评级插件

jQuery rating plugin that works with select options

本文关键字：插件 jQuery select 选项 使用      更新时间：2023-09-26

我已经尝试过rateit插件，但它似乎无法正确使用<option selected="selected">

更新：将JSfiddle更新为最新的jquery，现在我又遇到了一个问题，当我在select中有5个选项时，它只显示4颗星？

我已经找了几个小时了，现在找到一个评级插件：

  1. 不需要额外的HTML
  2. 使用title属性在每个选项悬停时显示选项文本
  3. 仅适用于全星级

HTML

<select class="test" id="rating1" name="Rating">
    <option value="1">Poor</option>
    <option value="2">Fair</option>
    <option value="3" selected="selected">Good</option>
    <option value="4">Very Good</option>
    <option value="5">Excellent</option>
</select>

您需要使选择框更新评级值。添加：

$('#rating1').change(function() {
  $('div#rating2').rateit('value',$(this).val());
});

请参见示例。

编辑：

RateIt需要jQuery 1.6.0+，这就是为什么更新jQuery版本会导致选择框（正确地）消失的原因。看看这把小提琴，看看它是否能满足你的需要。这将"逐步增强"selectbox，这样没有启用JavaScript的用户仍然可以使用select，而启用JS的用户将获得更好的版本。

如果您希望显示backing字段，则必须在rateit()调用后切换它。此外，为了防止"重置"选项出现，您需要设置另一个数据属性并扩展选择位：

示例。

您的jQuery版本很旧，需要1.6或更高版本。

相关文章：