Question

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

Answer 1

由于你正在使用jquery，你可以这样做：

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

http://jsfiddle.net/GAXBf/

Answer 2

万一有人想知道，在最新版本的 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>

Answer 3

我遇到了与jQuery Bar Rating（http://antenna.io/demo/jquery-bar-rating/examples/）

的原始海报相同的问题

当被调用时，select字段中的每个选项都被转换为包含在div中的链接，其中包含＆＃34; br-widget＆＃34;

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

＆＃13;

$(document).ready(function() {

  $(\'#rating\').barrating({
    theme: \'css-stars\' 
    });

  //HIDE THE FIRST STAR OPTIONS
  $(".br-widget a:first-child").css( "display", "none" );


});

＆＃13;

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

＆＃13;

Answer 4

我对这个最新的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>

Answer 5

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

<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颗零填充零。当然，只有在没有定义初始值的情况下，这才有效。

Answer 6

<select id="example">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Answer 7

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

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

在这个jquery栏评级库中，我们默认情况下不会在栏上设置任何值。

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

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

栏评级 - 希望默认选择无选择

7 个答案: