Search code examples
cssbootstrap-select

Remove open/close button from Bootstrap-Select

I have a button, if I press the button a open Bootstrap-Select list will show that has, aside, 2 buttons, one to save the changes and one to cancel the modifications. Pressing any of this buttons will make the Bootstrap-Select hide so I do not need the Bootstrap-Select drop-down button anymore.

On the website I have several Bootstrap-Select lists so I must hide the drop-down button for only one list, I guess I have to add a class, how do I add the class (or remove) the drop-down button for only one Bootstrap-Select list (only the button, not the whole list)?

http://silviomoreto.github.io/bootstrap-select/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<select class="selectpicker bootstrap-select-with-dropdown-button">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<select class="selectpicker bootstrap-select-without-dropdown-button">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
Solution

  • You can do this by adding the class to selectpicker element:

    $('.your-selectpicker-nobutton').selectpicker('setStyle', 'remove-button-class', 'add');

    Then, on your CSS, hide the dropdown caret:

    .remove-button-class .caret {
    display: none;
}

    Check the style method here: http://silviomoreto.github.io/bootstrap-select/#methods