bar rating - wanting default selection to be no selection - html

Question

From http://netboy.pl/demo/jquery-bar-rating/examples/ - I'm using the first rating system using 10 bars. However, I want the default to be no selected option at all (i.e. no bars). Right now the default selection is option #1 - any thoughts? I did try adding an empty option but all it did was add another bar to the front (for a total of 11 bars which is not what I want). I want the 10 bars but none highlighted/selected. Any thoughts?!?
<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

Since you're using jquery you can do something like this:
$('.example-a').prop("selectedIndex", -1);
http://jsfiddle.net/GAXBf/

Answer 2

URL : http://netboy.pl/demo/jquery-bar-rating/examples/ (This url is not working)
If i am not wrong, you are using jquery bar rating like (http://antenna.io/demo/jquery-bar-rating/examples/).
In this jquery bar rating library, we can set no value selected by default on 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>
Hope, It will resolve your problem.

Answer 3

In case its still relevant. You can add a empty Option.
<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>
This will give 5 stars with zero filled. Off course this will only work if there is no initial value defined.

Answer 4

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

Answer 5

Just in case anyone was wondering, in the latest version of the jQuery Bar Rating Plugin (v1.0.5) you can add the following option to do the trick:
<option disabled selected>Select an option</option>
So your select box will look something like this:
<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 6

I was having the same issue as the original poster with jQuery Bar Rating (http://antenna.io/demo/jquery-bar-rating/examples/)
When called each option within the select field was transformed to a link wrapped in a div with a class of "br-widget"
I only wanted to display 5 stars for the user to choose from, however the amount of options in the select would determine how many star ratings would show on the screen. The solution I found was to add a "Please Select" as an option and then to hide this using jquery as shown below.
$(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>

Answer 7

I had the same problem with this latest 2016 version and i solved it by adding this javascript AFTER the function call and now everything works (hope this help someone):
$(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();
});
Here is my full code:
<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>