Search code examples
twitter-bootstrapselection

Bootstrap-select ignoring active attribute

I'm using Bootstrap-select for additional drop down functionality. http://silviomoreto.github.io/bootstrap-select/

It doesn't seem to be picking up the selected item from my rendered HTML.

<select id="test-period" class="selectpicker show-tick pull-right">
<option value="yesterday">Yesterday</option>
<option value="lastupdate">Last update</option>
<option value="today">Today</option>
<option value="weektodate" active>Week to date</option>
<option value="periodtodate">Period to date</option>
<option value="seasontodate">Season to date</option>
<option value="yeartodate">Year to date</option>
</select>

I'm setting the active attribute on the week to date option. However when the page is rendered, it's showing the first item yesterday as the selected item.

The Bootstrap select documentation says that you can specify the selected element by using the following JavaScript method:

$('.selectpicker').selectpicker('val', 'weektodate');

However to retain compatibility with my existing code I'd like to specify the active element using html if possible. Am I doing something wrong or does Bootstrap-select ignore the active attribute?

Solution

  • The option active does not exist.

    You have to use selected instead, to have it as 'the selected one'

    <select id="test-period" class="selectpicker show-tick pull-right">
<option value="yesterday">Yesterday</option>
<option value="lastupdate">Last update</option>
<option value="today">Today</option>

<option value="weektodate" selected>Week to date</option> // or selected="selected"

<option value="periodtodate">Period to date</option>
<option value="seasontodate">Season to date</option>
<option value="yeartodate">Year to date</option>
</select>

    A list of <option> attributes can be found HERE