Create tag control to select multiple tags using Bootstrap and Bootstrap-select

Create tag control to select multiple tags using bootstrap and boostrap-select

Create tag control to select multiple tags using Bootstrap and Bootstrap-select

Post author:Jignesh Darji
Post published:December 18, 2017
Post category:My Pin

Step 1) Create Select List of tags

<select class="selectpicker show-tick" multiple data-max-options="2" data-show-subtext="true" data-live-search="true" data-actions-box="true">
                            <option data-subtext="sub title"> Tag 1</option>
                            <option data-subtext="sub title"> Tag 2</option>
                            <option data-subtext="sub title"> Tag 3</option>
                        </select>

Step 2) Add Bootstrap and Bootstrap-select CSS and JS

... header part ...
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

.... Body part ...

... footer part ....
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>

Step 3) Run the code in the browser.

Another Example (with label-success)

<select id='selLevel' class='selectpicker' name='levels' multiple>
                            <option title='Levels' value='No Preference'
                                    selected='selected'>
                                No Preference
                            </option>
                            <option title='<span class="label label-success">Department 1</span>' value=1 > Department 1 </option>
                            <option title='<span class="label label-success">Department 2</span>' value=2 > Department 2</option>
                            <option title='<span class="label label-success">Department 3</span>' value=3 > Department 3 </option>
                        </select>

Complete Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

</head>
<body>
<h1>Create tag control to select multiple tags using bootstrap and boostrap-select</h1><br/>
 <select class="selectpicker show-tick" multiple data-max-options="2" data-show-subtext="true" data-live-search="true" data-actions-box="true">
                            <option data-subtext="sub title"> Tag 1</option>
                            <option data-subtext="sub title"> Tag 2</option>
                            <option data-subtext="sub title"> Tag 3</option>
                        </select>
                        <select id='selLevel' class='selectpicker' name='levels' multiple>
                            <option title='Levels' value='No Preference'
                                    selected='selected'>
                                No Preference
                            </option>
                            <option title='<span class="label label-success">Department 1</span>' value=1 > Department 1 </option>
                            <option title='<span class="label label-success">Department 2</span>' value=2 > Department 2</option>
                            <option title='<span class="label label-success">Department 3</span>' value=3 > Department 3 </option>
                        </select>
              <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
  <script>
    $('.selectpicker').selectpicker();

  </script>  
            </body>
            </html>

Another Output: