선택된 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>