3

来自http://netboy.pl/demo/jquery-bar-rating/examples/ - 我正在使用第一个使用 10 条的评级系统。但是，我希望默认设置为根本没有选择的选项（即没有条形图）。现在默认选择是选项#1 - 有什么想法吗？我确实尝试添加一个空选项，但它所做的只是在前面添加另一个栏（总共 11 个栏，这不是我想要的）。我想要 10 个条但没有突出显示/选择。有什么想法吗？！？

<div class="input select rating-a">
    <select class="example-a" name="content_rating">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
     </select>
</div>
4

7 回答 7

3

由于您使用的是 jquery，因此您可以执行以下操作：

$('.example-a').prop("selectedIndex", -1);

http://jsfiddle.net/GAXBf/

于 2013-04-14T06:02:11.153 回答
2

如果它仍然相关。您可以添加一个空选项。

<select id="rating">
   <option value></option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>

这将给出 5 星零填充。当然，这只有在没有定义初始值的情况下才有效。

于 2016-07-28T11:28:47.840 回答
2 
<select id="example">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
于 2017-03-07T06:55:15.487 回答
2

网址： http: //netboy.pl/demo/jquery-bar-rating/examples/（此网址无效）

如果我没记错的话，您正在使用 jquery bar rating （http://antenna.io/demo/jquery-bar-rating/examples/）。

在这个 jquery bar rating 库中，我们可以在 bar 上设置默认未选择的值。

<script>
$('#rating').barrating('show', {
    theme: 'bars-1to10',
    deselectable: true
});
</script>

HTML：

<select id="rating">
    <option value=""></option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    .
    .
    <option value="10">10</option>
</select>

希望，它会解决你的问题。

于 2016-06-24T01:57:12.463 回答
1

万一有人想知道，在最新版本的jQuery Bar Rating Plugin (v1.0.5) 中，您可以添加以下选项来解决问题：

<option disabled selected>Select an option</option>

所以你的选择框看起来像这样：

<select>
  <option disabled selected>Select an option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <!-- etc. -->
</select>
于 2015-03-16T11:00:13.427 回答
1

我对这个最新的 2016 版本有同样的问题，我通过在函数调用之后添加这个 javascript 来解决它，现在一切正常（希望这对某人有帮助）：

$(document).ready(function() {
        // remove the selection on the dropdown menu
        $("#rating").val([]);
        // remove all "selected" css to show as "unselected" by default
        $(".br-widget a").removeClass('br-selected');
        // remove default "selected text", if any
        $(".br-current-rating").empty();
});

这是我的完整代码：

<script>
    // 5-star rating script
    $(function() {
        $('#rating').barrating({
            theme: 'fontawesome-stars',
            initialRating: null, // initial rating
            showValues: false, // display rating values on the bars?
            showSelectedRating: true, // append a div with a rating to the widget?
            deselectable: true, // allow to deselect ratings
            reverse: false, // reverse the rating?
            readonly: false, // make the rating ready-only?
            fastClicks: true, // remove 300ms click delay on touch devices?
            hoverState: true, // change state on hover?
            silent: false, // supress callbacks when controlling ratings programatically
        });
    });

    $(document).ready(function() {
        // remove the selection on the dropdown menu
        $("#rating").val([]);
        // remove all "selectec" css to show as "unselected" by default
        $(".br-widget a").removeClass('br-selected');
        // remove default "selected text", if any
        $(".br-current-rating").empty();
    });
</script>
<style>
    .br-wrapper{
        width: auto;
        display: inline-block;
    }
    .br-widget{
        width: auto;
    }
</style>
于 2016-05-28T20:20:48.147 回答
1

我遇到了与 jQuery Bar Rating ( http://antenna.io/demo/jquery-bar-rating/examples/ )的原始海报相同的问题

当调用选择字段中的每个选项时，将转换为包含在具有“br-widget”类的 div 中的链接

我只想显示 5 颗星供用户选择，但是选择中的选项数量将决定屏幕上将显示多少星级。我找到的解决方案是添加一个“请选择”作为选项，然后使用 jquery 隐藏它，如下所示。

$(document).ready(function() {

  $(\'#rating\').barrating({
    theme: \'css-stars\' 
    });

  //HIDE THE FIRST STAR OPTIONS
  $(".br-widget a:first-child").css( "display", "none" );


});
<select name="rating" id="rating">
  <option value="0">Please Select</option>
  <option value="1">1 Star</option>
  <option value="2">2 Stars</option>
  <option value="3">3 Stars</option>
  <option value="4">4 Stars</option>
  <option value="5">5 Stars</option>
</select>

于 2016-01-25T14:41:33.987 回答