与选择选项一起使用的 jQuery 评级插件

发布于 2025-01-06 06:01:29 字数 759 浏览 0 评论 0原文

我已经尝试过 rateit 插件，但这似乎无法与

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

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

不需要额外的 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>

原文

I have tried the rateit plugin but this does not seem to work correctly with the <option selected="selected">

UPDATE:
Updated the JSfiddle to the latest jquery and now I have the issue back where it is only displaying 4 stars when I have 5 options in the select?

I have been looking for a couple of hours now to find a rating plugin which:

Doesn't require extra HTML.
Displays the option text on hover of each each using the title attribute.
Only works with full star rating.

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叫思念不要吵 2025-01-13 06:01:29

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

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

参见示例。

编辑：

RateIt 需要 jQuery 1.6.0+，这就是更新 jQuery 版本会导致选择框（正确）消失的原因。看看这个小提琴看看它是否满足您的需求。这将“逐步增强”选择框，以便未启用 JavaScript 的用户仍然能够使用选择，而启用 JS 的用户将获得更好的版本。

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

示例。

You need to make the selectbox update the rating value. Add:

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

See example.

Edit:

RateIt requires jQuery 1.6.0+, which is why updating the jQuery version causes the selectbox to (properly) disappear. Have a look at this fiddle to see if it meets your needs. This will "progressively enhance" the selectbox so that users without JavaScript enabled will still be able to use the select, and those with JS enabled will get the nicer version.

If you want the backing field to be shown, you have to toggle it after the rateit() call. Also, to prevent the "reset" option from showing up, you need to set another data attribute and extend the select a bit:

Example.

回复收藏 0 原文