Counteract reboot bootstrap / select2?

Question

I use bootstrap on the site and use the following download code to turn my checkboxes into select2 dropdowns

$("select").select2();

However, when on a page with a drop-down list, select a slight delay when the original can be seen before the replacement select2 is added. This is pretty annoying when the form elements on my pages move around.

Is there a way to generate select2 HTML in my backend (ASP MVC3) and write it to the page so that the select2 plugin still correctly plugs in all the behavior?

Answer 1

. style='display:none;'. $('form').show()

select2, , .

style='display:none;' , , "" .

Answer 2

Bootstrap-Select.

, Flash of Unstyled Content (FOUC) , JavaScript , . .

, , , .

, - .

, css select, , javascript .

/* apply styles to original select element before hidden */
select.select2{
  color: #444;
  background-color: #FFF;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  padding-left: 5px;
  font: unset;
}

-

$('.select2').select2();

body {
  display: flex;
  flex-direction: row;
}

div {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
}

select {
  min-width: 150px;
}

.select2-theme {
  color: #444;
  background-color: #FFF;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  padding-left: 5px;
  font: unset;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.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/select2/4.0.7/js/select2.js"></script>


<div >
  <label>Select 2</label>
  <select class="select2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>

</div>

<div>
  <label>Select2 Themed</label>
  <select class="select2-theme">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>

<div>
  <label>Default Select</label>
  <select >
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>  
</div>

Hide result