Default selection in bootstrap dropdown
The attribute "selected" only works in <select>
elements. Unfortunately it does not work in lists.
I believe what you want is:
<select class="form-control" name="features">
<option value="" selected>Feature 1</option>
<option value="">Feature 2</option>
<option value="">Feature 3</option>
<option value="">Feature 4</option>
<option value="">Feature 5</option>
<option value="">Feature 6</option>
</select>
Try this:
$(document).ready(function() {
$(".dropdown .dropdown-menu li a")[0].click();
});
This will always select your first li
Unfortunately, I don't believe you'll be able to achieve this effect using a conventional bootstrap drop down menu.
Unlike a traditional HTML "select", a bootstrap drop down is typically used to group a series of links under a header. When you click a menu item, it doesn't become selected as such, rather an action is usually performed.
I'd advise just using a straightforward HTML select, but borrowing styles from the bootstrap CSS library so it looks consistent. Something along the lines of:
<select class="bootstrap-select">
<option value="1" selected="selected">Feature 1</option>
<option value="2">Feature 2</option>
<option value="3">Feature 3</option>
<option value="4">Feature 4</option>
</select>