选上的jQuery插件只显示一个残破的列表

Question

这里是我的代码：

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

当chosen()不叫，页面显示的默认选择小部件。

否则，它显示了一个破碎的名单如下：

难道我做错了什么吗？谢谢。

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>