选择 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() 时，页面显示默认的 select 小部件。

否则显示如下所示的损坏列表：

我是不是做错了什么？谢谢。

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>

选择 jQuery 插件仅显示损坏的列表

Chosen jQuery Plugin Only Shows a Broken List

jquery

django

jquery-chosen

django-crispy-forms