CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-select
Bishwarup Das
Bishwarup Das

Reputation: 731

Bootstrap Select-Picker prevent close

Hey Guys I am working with Bootstrap Select-picker. I want to open the drop list by default and not to close the select-picker on focus out.

Code:

<select class="selectpicker" multiple data-live-search="true" data-actions-box="true">
  <optgroup label="filter1">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </optgroup>
  <optgroup label="filter2">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </optgroup>
  <optgroup label="filter3">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </optgroup>
</select>
<script type="text/javascript">
  $('.selectpicker').selectpicker();
</script>

Is this possible??

Upvotes: 2

Views: 4783

Answers (2)

MrZarq
MrZarq

Reputation: 258

The solution provided by ZimSystem works great, until you need multiple open at the same time, then it fails. The following modification works.

In JavaScript: 

//initial open
$('[data-id=mySel]').trigger('click');

In CSS:

.dropdown-menu {
    position: static;
    display: block !important;
    min-height: inherit !important;
    max-height: inherit !important;
}

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362430

You can add some jQuery to have it auto open, and re-open when anywhere in the document is clicked (causing it normally to lose focus and close)..

//auto open
$('[data-id=mySel]').trigger('click');

//stay open
$(document).on("click", function () {
   $('[data-id=mySel]').trigger('click');
});

Demo: http://www.bootply.com/77umTeRI6n

Upvotes: 4

Related Questions