选择的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">
	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>