It would be very useful if we can use the title attribute also with a default select picker, like:
<select class="selectpicker" title='Choose one of the following...'>
For now its only working when you specify multiple.
Totally agree.
It is a total deal breaker to not be able to have a non-multiple select picker with nothing selected initially.
If on top of that you could set a title, so much the better.
If you want a placeholder option just add
<option data-hidden="true">Choose one of the following</option>
as the first option and bootstrap-select will auto select that as the placeholder when nothing is selected.
@truckingsim That won't work if you also made that selection data-live-search. I'm wondering why is it designed like this in the first place?
+1
<option data-hidden="true" value="">Choose one...</option>
This I think is better, because otherwise your select will have by default the value of the hidden options' text.
Still a hackish way though, it makes no sense to have an empty option as a label, when one could ideally use a title="" attribute just as with the multiple selects...
@hellocosmin I guess I'm not sure what the fix is here? A regular select has to have at least one option selected at all times. I suppose setting the title attribute could just automatically insert
<option data-hidden="true" value="">Choose one...</option>
@caseyjhol Tested against 0351bd8960f02a7e2cd775fab1308ffa00b4f085 and still having to use the hidden option hack manually... setting the data-title="" attribute or passing title as an argument to .selectpicker() still doesn't seem to be respected in 1.7.0 RC1. I notice that if you set either, a hidden option is added to the top of the select, but the option's text node is empty.
Hrmm...it's working for me (Chrome 42, Windows 8.1). Can you provide me with a jsfiddle? The option's text node is empty on purpose. render() already checks to see if the selected option is empty, and if so, sets the title accordingly.
@nickbouton Give it a shot now using the latest version from master. I was able to reproduce it if the select had a lot of options, but it was working fine on a select with ~20 options.
@caseyjhol Scratch my previous comment, I dumped a cut-down version of what I had into JSfiddle and it looks to be working fine. Might be another library version causing issues or conflicting with something, I'll try and track it down here. Thanks for your help.
I experienced this problem as well. I attempted to update the bootstrap-select code to apply this fix. However, this significantly changed the styling inside our application. I fixed the problem by applying the above fix
data-hidden="true"
Most helpful comment
If you want a placeholder option just add
<option data-hidden="true">Choose one of the following</option>as the first option and bootstrap-select will auto select that as the placeholder when nothing is selected.