選ばれたjQueryのプラグインはここでしか壊れ一覧

Question

を表示私のコードです：chosen()が呼び出されていない場合

<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> 

、ページがデフォルトの選択ウィジェットを示しています。

それ以外の場合は、以下のように壊れたのリストを示しています

私はここで何も悪いことをやっていますか？ありがとうございました。

Answer 1

私は、あなたが選んだjQueryにはCSSを含めるのを忘れていたと思います。以下の作品：

$(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>