在我的 Django 模板中显示 Chosen.js 时遇到问题

Question

我正在学习开发，我正在使用一个名为 linter-jscs 的 linting 工具和 Atom。我有一个简单的 javascript 文件定义如下：

linter-jscs 无效的换行符

$(document).ready(function () {
    $('#id_facilitydimselect').chosen();
  }
)
  ;

linting 工具显示如下：

这真的是一个会导致我的代码无法运行的错误吗？我似乎无法摆脱它。

我正在尝试使用以下 Django 模板来使用所选的 javascript 库，但它没有正确显示。所以，这要么是由于我在下面的错误，要么是我没有得到的其他原因。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
    <script src= "{% static '/accounts/chosen.jquery.js' %}" type="text/javascript"></script>
    <script src= "{% static '/accounts/security_chosen.js' %}" type="text/javascript"></script>
    <link rel="stylesheet" href="{% static '/accounts/chosen.css' %}">
    <div>
     <em>Facility: </em>

     <select id_facilitydimselect="Choose a Facility..." class="chosen-select" multiple tabindex="4">
       {% for facility in facilitydim %}
       <option value="{{facility.coid_name}}">{{facility.coid_name}}</option>
       {% endfor %}
     </select>

我知道 Chosen 已使用 pip install django-chosen 正确安装，我可以在控制台的 GET 语句中看到它，如下所示：

[08/Jan/2018 09:52:39] "GET /account/profile/ HTTP/1.1" 200 76624
[08/Jan/2018 09:52:39] "GET /static/accounts/security_chosen.js HTTP/1.1" 200 88
[08/Jan/2018 09:52:39] "GET /static/accounts/chosen.css HTTP/1.1" 200 11978
[08/Jan/2018 09:52:39] "GET /static/accounts/chosen.jquery.js HTTP/1.1" 200 47205

真正的问题是什么？

Answer 1

您的 js/jquery 代码没问题，但您必须将 id 属性添加到 select 输入。

<select id="id_facilitydimselect" class="chosen-select" multiple tabindex="4">
   {% for facility in facilitydim %}
   <option value="{{facility.coid_name}}">{{facility.coid_name}}</option>
   {% endfor %}
</select>

使用 jQuery 时，获得 select 或正确在 99% 的情况下绝对至关重要。最常用的是：

id selector selects 具有特定 id 值的元素：

$("#id_value")

attribute equals selector即selects元素与某属性name/value组合

$("[attribute='value']")
// for example selector that selects elements with attribute name="test"
$("[name='test'])

attribute contains selector selects 个元素，其中属性包含特定值

$("[attribute*='value']")
// for example selector that selects element where attribute name contains 'est'
$("[name*='est']);

:input selector 其中 select 所有输入、文本区域、select 和按钮元素（所有表单控件）

$(":input") // selects all inputs
$("form") // selects form

在我的 Django 模板中显示 Chosen.js 时遇到问题

Having issues with getting Chosen.js to display in my Django template

django

jquery-chosen