Choix de la liste de sélection déroulante Multiselect

Question

J'utilise 'choisi-choisi' pour la liste déroulante multisélection. Je suis confronté à un problème avec la liste déroulante, tout d'abord lors du chargement de la liste affichée sous forme d'agrandissement (tous les éléments sont visibles et sans effet de la bibliothèque choisie) pendant un moment, puis retrouve la forme et la forme désirées de la liste déroulante .

Veuillez trouver ci-joint l'image avant et après le chargement de la page. Attachment

Answer 1

Vous pouvez le cacher jusqu'à ce que la page soit chargée?

CSS

#your-dropdown{ 
    display:none; 
} 

jQuery

$(window).load(function() { 
    // When the page has loaded 
    $("#your_dropdown").fadeIn(1000); 
}); 

Answer 2

Avez-vous enveloppé votre script dans la fonction $(document).ready()?

Cela devrait garantir qu'aucun de vos scripts ne s'exécute tant que la page n'a pas été entièrement chargée.

Il est possible que .chosen() soit en cours d'exécution avant que votre page ne charge les éléments initiaux.

Plus d'info here

$(document).ready(function() 
 
{ 
 
    //following code used to generate 2000 items in the select element 
 
    //in order to try and replicate the issue. 
 
    var counter = 2000; 
 
    for(var i=1; i <= counter; i++) 
 
    { 
 
    $(".chosen-select").append("<option> item " + i + "</option>"); 
 
    } 
 

 
    //Initialise JQuery chosen library on select element 
 
    $(".chosen-select").chosen(); 
 
});

<!-- Links to external resources and JQuery 2.1.1 !--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css"> 
 

 
<!-- HTML !--> 
 
<select multiple class="chosen-select"></select>

---

Aussi, assurez-vous que vous faites référence à la JQuery bibliothèque avant vous faites référence à la bibliothèque choisie dans votre balisage.