将Chosen.js显示在我的Django模板

Question

我正在学习开发，并且我使用了一个名为linter-jscs的Atom linting工具。我有一个简单的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>

我知道使用pip install django-selected正确安装了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 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时，在99％的情况下获得选择权绝对至关重要。最常用的是：

id selector选择具有特定ID值的元素：

$("#id_value")

attribute equals selector选择具有特定属性名称/值组合的元素

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

attribute contains selector选择属性包含特定值的元素

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

:input selector选择所有输入，textarea，select和按钮元素（所有表单控件）

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