bootstrap-select: options not appearing in dropdown

Question

I'm using ASP.net MVC with bootstrap. I have two dropdown lists that I use bootstrap-select on to match the theme. The problem is that if I click the dropdown list, it doesn't show its content. However, if I press the down (or up) key when it's focused it will display the contents of the dropdown list.

Razor:

<div class="form-group">
    @Html.LabelFor(m => m.Profession, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.Profession, new SelectList(Enum.GetValues(typeof(Profession))),
                "Select Profession", new { @class = "selectpicker" })
    </div>
</div>

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
    $('select').selectpicker();
    });
</script>`

Any ideas? I've been stuck on this too long :-)

Answer 1

If I understand the bootstrap-select documentation correctly, you really only need to add the class selectpicker to your dropdown. You probably don't need the document ready statement at all. Just remove that entire script block and see if that fixes it...you may be initializing it twice and hosing things up.

The other option is to remove the class and leave the document ready declaration.