skip to Main Content

I created a multiple select-option using bootstrap select plugin. I want to add close button like select-all or remove-all buttons.

It just closes when you click outside.

$(function() {
  $('#multiple_selector').selectpicker();
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.js"></script>
<select id="multiple_selector" multiple data-actions-box="true">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
  <option value="50">50</option>
  <option value="60">60</option>
</select>

Here is my jsfiddle : https://jsfiddle.net/ozgunlu/dL6brmyp/2/

3

Answers


  1. The documentation suggests adding { header:"header text" } which will add a close button; with spaces as the header you get just the close button:

    $(function() {
        $('#multiple_selector').selectpicker({header:" "});
    });
    

    Updated fiddle: https://jsfiddle.net/m0s46g9k/

    Login or Signup to reply.
  2. You can trigger your select on action button using class like below.

    $(function() {
      $('#multiple_selector').selectpicker();
      $('.actions-btn').on("click", function() {
        $('#multiple_selector').trigger('click');
      });
    
    });
    body {
      background: #20262E;
      padding: 20px;
      font-family: Helvetica;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.js"></script>
    <select id="multiple_selector" multiple data-actions-box="true">
      <option value="0">0</option>
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
      <option value="50">50</option>
      <option value="60">60</option>
    </select>
    Login or Signup to reply.
  3. You can add data-done-button="true"

    <select id="multiple_selector" multiple data-actions-box="true" data-done-button="true">
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search