There's not a great way to prevent the flickering all together, but you can minimize it.

The problem is that in addition to whatever other bottlenecks you have, you have to download and parse a lot of javascript files first.  *Bootstrap-Select* depends on *Bootstrap* which itself depends on *jQuery*. By the time all that javascript is loaded, the page is probably already rendered.

One thing you can do to minimize the flickering is to style the `select` elements as similar to the final product as possible so they take the same amount of screen space.  When the plugin loads, it will hide this control anyway and replace it with it's own implementation.  Use the selector that you were going to pass into the `selectpicker()` function and style like this:



    .selectpicker {
        width: 220px;
        height:34px;
        margin-bottom: 10px;
    }

##[Working Demo in fiddle][jsFiddle 1]

[![screenshot][screenshot]][jsFiddle 1 Demo]

**Note:** I've intentionally delayed the load time by using `setTimeout` so the difference is more noticeable.



    setTimeout(function() { $(".selectpicker").selectpicker(); }, 500);

----

If that's really still not acceptable, you can display a loading graphic until the page is fully loaded.  
Adapted from [Loading screen example][Load Page]:

Add this to your HTML:



    <div id="loader"></div> 

Style it like this in CSS:



    #loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('http://i.imgur.com/ntIrgYXs.gif') 50% 50% no-repeat grey;
    }

And remove it with the following JavaScript after you've loaded your page:



    $("#loader").fadeOut("slow");

##[Working Demo Of Loading Screen In Fiddle][jsFiddle 2]


[jsFiddle 1]: http://jsfiddle.net/KyleMit/aayq8/
[jsFiddle 1 Demo]: http://jsfiddle.net/KyleMit/aayq8/show/light
[jsFiddle 2]: http://jsfiddle.net/KyleMit/aayq8/3/
[screenshot]: http://i.imgur.com/HtVebvl.png
[Load Page]: https://stackoverflow.com/q/21572128/1366033

The Bootsrap-select plugin is amazing (http://silviomoreto.github.io/bootstrap-select/).  It provides an extremely easy way of creating gorgeous select menus in Bootstrap.  The one problem I've encountered with it, however, is "flickering" on page load.  What I mean by this is fairly straight forward:

 1. The page loads with original HTML select element (which of course looks like crap)
 2. The Bootstrap-select plugin JS runs
 3. At some noticeable time after the page loads the original HTML select element is converted to a nice Bootstrap-select element by JS in Step (2).

So, the user first sees the HTML select element and then sees it switch to the pretty Bootstrap-select item, thus the "flickering".

Has anyone found a good solution to the problem?

Bootstrap-select plugin: how to avoid flickering

When Bootstrap Select initializes, it'll build a set of custom divs that run alongside the original `<select>` element and will typically synchronize state between the two input mechanisms.

[![BS Select Elements][1]][1]

Which is to say that one way to handle events on bootstrap select is to listen for events on the original select that it modifies, regardless of who updated it.

## Solution 1 - Native Events

Just listen for a [`change` event][4] and get the selected value [using javascript][2] or [jQuery][3] like this:  



    $('select').on('change', function(e){
      console.log(this.value,
                  this.options[this.selectedIndex].value,
                  $(this).find("option:selected").val(),);
    });



<sup>***NOTE**: As with any script reliant on the DOM, make sure you wait for the [DOM ready event][5] before executing</sup>

### Demo in Stack Snippets:






    $(function() {

      $('select').on('change', function(e){
        console.log(this.value,
                    this.options[this.selectedIndex].value,
                    $(this).find("option:selected").val(),);
      });
      
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

    <select class="selectpicker">
      <option val="Must"> Mustard </option>
      <option val="Cat" > Ketchup </option>
      <option val="Rel" > Relish  </option>
    </select>




## Solution 2 - Bootstrap Select Custom Events


As [this answer alludes][7], Bootstrap Select has their own set of [custom events][6], including `changed.bs.select` which:

> fires after the select's value has been changed. It passes through event, clickedIndex, newValue, oldValue.

And you can use that like this:



    $("select").on("changed.bs.select", 
          function(e, clickedIndex, newValue, oldValue) {
        console.log(this.value, clickedIndex, newValue, oldValue)
    });



### Demo in Stack Snippets:






    $(function() {

      $("select").on("changed.bs.select", 
            function(e, clickedIndex, newValue, oldValue) {
          console.log(this.value, clickedIndex, newValue, oldValue)
      });

    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

    <select class="selectpicker">
      <option val="Must"> Mustard </option>
      <option val="Cat" > Ketchup </option>
      <option val="Rel" > Relish  </option>
    </select>



[1]: https://i.stack.imgur.com/c8p5E.png
[2]: https://stackoverflow.com/q/1085801/1366033
[3]: https://stackoverflow.com/q/10659097/1366033
[4]: https://developer.mozilla.org/en-US/docs/Web/Events/change
[5]: https://learn.jquery.com/using-jquery-core/document-ready/
[6]: https://silviomoreto.github.io/bootstrap-select/options/#events
[7]: https://stackoverflow.com/q/36944647/1366033

I'm using Bootstrap 3.0.2 and the [Bootstrap-select][1] plugin.


**Here's my select list**:



    <select class="selectpicker" data-live-search="true" data-size="7">
	  <option>Petr Karel</option>
      <option>Honza Novák</option>
      <option>David Egydy</option>
      <option>Sláva Kovář</option>
      <option>Hana Skalická</option>
      <option>Simona Kolářová</option>
      <option>Kateřina Sychová</option>
      <option>Amálka Sychová</option>
      <option>Jana Sychová</option>
      <option>Magdaléna Sychová</option>
      <option>Tereza Sychová</option>
      <option>Bohdana Sychová</option>
    </select>

**Here's my JavaScript**:

         

    //inicialization of select picker
    $('.selectpicker').selectpicker();
     
    //on change function i need to control selected value
    $('select.selectpicker').on('change', function(){
       var selected = $('.selectpicker option:selected').val();
       alert(selected);
    });


### Issue

My problem is that change function won't work. It doesn't do anything, and I can't find solution by myself.

If i put it into document ready instead change function it seems to be working. So i guess i have mistake somewhere in: 

    $('select.selectpicker').on('change', function(){

I also tried to use only: 

    $('.selectpicker').on('change', function(){

without this select prefix but nothing changes.

### UPDATE

Solution is putting jquery code into `document.ready()`. Thanks to [Kartikeya][2]

[1]: http://silviomoreto.github.io/bootstrap-select/
[2]: https://stackoverflow.com/users/3852595/kartikeya

Bootstrap-select - how to fire event on change

## Method 1 - Update Bootstrap-Select Version >1.7

Per the release notes in [Version 1.7.0][1]:

>[#888][#888], [#738][#738]: Show "title" when using a non-multiple select
A blank option is prepended to the select, which is then selected by
default. This allows the title to be shown when the select is initially
loaded and "no" options are selected yet.



    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>


**Demo with Stack Snippets**:





    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

    <select class="selectpicker" >
      <option data-hidden="true">Pick One</option>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>



## Method 2 - Hide empty option with CSS

You can hide the first `<li>` element in the dropdown menu like this (although you'd probably want to base it off a class so it didn't happen by default).



    .bootstrap-select ul.dropdown-menu li:first-child {
        display: none;
    }

**Demo with Stack Snippets**:





    .bootstrap-select ul.dropdown-menu li:first-child {
        display: none;
    }



    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

    <select class="selectpicker" title="Pick One" >
      <option></option>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>



## Method 3 - Hide empty option with data attributes

As suggested by @Antiga, you can hide the first option with `data-hidden="true"` like this:



    <select class="selectpicker">
      <option data-hidden="true">Pick One</option>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>

**Demo with Stack Snippets**:





    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

    <select class="selectpicker" >
      <option data-hidden="true">Pick One</option>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>





[1]:https://github.com/silviomoreto/bootstrap-select/releases/tag/v1.7.0
[#738]:https://github.com/silviomoreto/bootstrap-select/issues/738
[#888]: https://github.com/silviomoreto/bootstrap-select/issues/888

In [Bootstrap-Select][1], how can I prevent the first selected item from being shown in the title. Alternatively, how can I hide an empty first item from the list of drop down options

In HTML, the `<select>` element will automatically select the first `<option>` element by default.  The typical way around this is to create a blank first row, but this looks pretty odd as part of the dropdown menu exposed by bootstrap select.

Here are my two options:



    <select class="selectpicker" title="Pick One">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>

    <select class="selectpicker" title="Pick One">
      <option></option>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>

But neither look very good. The first ignore the `title` property entirely and the second has a blank space which looks weird on a dropdown menu:

![screenshot][2]







    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

    <select class="selectpicker" title="Pick One">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>

    <select class="selectpicker" title="Pick One">
      <option></option>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>




[1]: https://github.com/silviomoreto/bootstrap-select
[2]: http://i.imgur.com/MqDKXdT.png

Show title in Bootstrap-Select without empty element

You can programmatically clear the selected options by calling [`.selectpicker('deselectAll')`][1].  

You'll also need to tap into the change event for the select box to see if you need to call into the method.  To do that, just [monitor the `change` event on the original select element][2].





    $('#country_key').on('change', function(){
      if (this[0].selected) {
        $(this).selectpicker('deselectAll');
      }
    });

### Demo in Stack Snippets




    $('#country_key').on('change', function(){
      if (this[0].selected) {
        $(this).selectpicker('deselectAll');
      }
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

    <select id="country_key" data-container="body" 
            class="selectpicker show-menu-arrow" data-width="250px" multiple>
        <option value="" >-clear-</option>
        <option value="1">USA</option>
        <option value="2">Russia</option>
        <option value="3">China</option>
        <option value="4">Spane</option>
    </select>




[1]: http://silviomoreto.github.io/bootstrap-select/#selectAll
[2]: https://stackoverflow.com/a/18660822/1366033

I'm using [bootstrap-select][1] like this:



	<select name="country_key" class="show-menu-arrow" multiple
            data-container="body" data-width="250px" >
		<option value="">-clear-</option>
		<option value="1">USA</option>
		<option value="2">Russia</option>
		<option value="3">China</option>
		<option value="4">Spain</option>
	</select>

I can select `multiple` options, but I also need to clear which options I chosen.

For example, if I choose `USA` and `Spain`, when I click `-clear-`, I need to clear the other options and close the dropdown.

Any idea how to do this?

[1]: http://silviomoreto.github.io/bootstrap-select

Bootstrap-select clear when chosen empty option

The issue is that bootstrap-select will hide your original input and instead style it's own with divs  Here's what that looks like:

![boostrap-select DOM](http://i.imgur.com/NfGOKP0.png)

So when you submit, you should see the following error when HTML5 Validation tries to focus on your hidden control:

![not focusable](http://i.imgur.com/umznh2c.png)

According to the specs on [hidden input elements][1]

> When an input element's type attribute is in the Hidden state [...] The input element represents a value that is not intended to be examined or manipulated by the user.


As a workaround, you can toggle the visibility back on, but collapse the control.  This might cause other issues, and wouldn't actually focus the right control, but would cause the validation message to appear in the right place.

You could use the following CSS



    select.selectpicker {
      display: block !important;
      float: left;
      overflow: hidden; 
      height: 34px;
      width: 0;
      border: 0; 
      padding: 0; 
      box-shadow: none; 
      color: white; 
    }

Also, you'll want a way to transfer focus events from the original, now available, control to bootstrap-select.  This will capture both your own tab events on the forum and help redirect focus when HTML5 validation kick in.



    $("select.selectpicker").focus(function(){
      $(this).next(".bootstrap-select").find('.selectpicker').focus();
    });

**Here's a demo in stack snippets**:





    $("select.selectpicker").focus(function(){
      $(this).next(".bootstrap-select").find('.selectpicker').focus();
    });




    select.selectpicker {
      display: block !important;
      float: left;
      overflow: hidden; 
      
      height: 34px;
      width: 0;
      border: 0; 
      padding: 0; 
      
      box-shadow: none; 
      color: white; 
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>


    <form >
      <input type="text" name="name" required /><br/>
      
      <select name="select-plain" required>
        <option></option>
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select><br/>
      
      <select name="select-boot" class="selectpicker" required>
        <option></option>
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select><br/>
      
      <input type="submit" value="Submit"/>
    </form>



[1]: http://www.w3.org/html/wg/drafts/html/master/forms.html#hidden-state-(type=hidden)

I am using the [bootstrap-select][2] plugin, and HTML5 validation to validate the `<select>`. 


When the form is submitted without selecting the option, I am able to view the error message. However, the error message is displayed outside the form and not next to the `<select>`. 

This validation is working perfectly fine for other input fields that do not use the plugin, but has issues for any `<select>` that uses the plugin.


![Error displayed outside the form][1]

Any ideas?


  [1]: http://i.stack.imgur.com/N9UUy.png
  [2]: http://silviomoreto.github.io/bootstrap-select/

Bootstrap-select validation error placement

Tab order should naturally roughly follow the order of the HTML elements in the DOM.  

Here's an example of it working just fine with version 1.6.3





    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name">
    </div>

    <div class="form-group">
      <label for="name">Something</label>
      <select class="selectpicker form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>

    <div class="form-group">
      <label for="something">Something</label>
      <input type="text" class="form-control" id="something">
    </div>



If you remove the bootstrap-select, and just let the regular `<select>` element be part of the form, does it still have issues?  If so, bootstrap select isn't the root of the problem.

Either way, we'll probably need a working demo to diagnose the problem.  You can take the Stack Snippet in this answer and start adding to it until you can recreate the problem.

I am using [1.6.3][1] of this [bootstrap-select][2] for select menus with Bootstrap. 

However, when I tab through my form, it skips over the `select` elements the have class `selectpicker`: i.e. the element isn't in the tab order.  

There is a 1.6.4 version on GitHub, but I can' find it on a CDN.

Wondering if anyone else has run into that issue and if there is a fix.

[1]: https://cdnjs.com/libraries/bootstrap-select
[2]: https://github.com/silviomoreto/bootstrap-select

Bootstrap-Select skipping tab-index

You're currently loading the following JavaScript files in the following order:

1. jQuery 2.1.0
2. Bootstrap 3.2.0
3. Bootstrap-Select 1.6.5
4. Bootstrap 3.3.4

The second call to a different version of bootstrap is what's causing issues.  Get rid of it and you should be fine.

### Demo in Stack Snippets





    $('.selectpicker').selectpicker({
        style: 'btn-default',
        size: 4
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.1/css/bootstrap-select.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.1/js/bootstrap-select.js"></script>

    <select class="form-control deptId selectpicker" name="depId" placeholder="Department Name">
      <option selected="selected">Select department name</option>
      <option>Depart 1</option>
      <option>Depart 2</option>
      <option>Depart 3</option>
      <option>Depart 4</option>
      <option>Depart 5</option>
    </select>




Also, here's an [updated Demo in Fiddle][1]

[1]: https://jsfiddle.net/KyleMit/uscj19zL/4/

I found that bootstrap selectpicker does not work with bootstrap.js file. If bootstrap.js and selectpicker files are in same location listpicker does not open.

    <select class="form-control deptId selectpicker" name="depId" placeholder="Department Name">
        <option selected="selected">Select department name</option>
        <option>Depart 1</option>
        <option>Depart 2</option>
        <option>Depart 3</option>
        <option>Depart 4</option>
        <option>Depart 5</option>
    </select>

[Fiddle Sample][1]


  [1]: https://jsfiddle.net/uscj19zL/3/

https://jsfiddle.net/uscj19zL/3/