jQuery Plugin Affiche uniquement une liste brisé

Question

Voici mon code:

<div id="div_id_code" class="form-group"> 
    <label for="id_code" class="form-control-label requiredField"> 
    Language<span class="asteriskField">*</span> 
    </label> 
    <div class=""> 
    <select class="select form-control" id="id_code" name="code" required> 
     <option value="" selected="selected">---------</option> 
     <option value="en">Inglés</option> 
     <option value="zh-hans">Chino simplificado</option> 
     <option value="zh-hant">Chino tradicional</option> 
     <option value="es">Español</option> 
     <option value="hi">Hindi</option> 
     <option value="ar">Árabe</option> 
     <option value="pt-br">Portugués de Brasil</option> 
     ... 
     ... 
    </select> 
    </div> 
</div> 
... 
... 
<script src="{% static 'js/jquery.min.js' %}"></script> 
<script type="text/javascript" src="{% static 'js/chosen.jquery.min.js' %}"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#id_code').chosen(); 
    $('#id_fluency').chosen({disable_search_threshold: 10}); 
    }); 
</script> 

Lorsque chosen() n'est pas appelée, la page le widget de sélection par défaut.

Sinon, il affiche une liste brisée comme ci-dessous:

que je fais quelque chose de mal ici? Je vous remercie.

Answer 1

Je suppose que vous avez oublié d'inclure le css pour jQuery choisi. Les travaux suivants:

$(function() { 
 
    $('#id_code').chosen(); 
 
    //$('#id_fluency').chosen({disable_search_threshold: 10}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script> 
 

 
<div id="div_id_code" class="form-group"> 
 
    <label for="id_code" class="form-control-label requiredField"> 
 
\t Language<span class="asteriskField">*</span> 
 
    </label> 
 
    <div class=""> 
 
    <select class="select form-control" id="id_code" name="code" required> 
 
     <option value="" selected="selected">---------</option> 
 
     <option value="en">Inglés</option> 
 
     <option value="zh-hans">Chino simplificado</option> 
 
     <option value="zh-hant">Chino tradicional</option> 
 
     <option value="es">Español</option> 
 
     <option value="hi">Hindi</option> 
 
     <option value="ar">Árabe</option> 
 
     <option value="pt-br">Portugués de Brasil</option> 
 
    </select> 
 
    </div> 
 
</div>