2
(1)

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:

How useful was this post?

Click on a star to rate it!

Average rating 2 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Share this post on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?