Question

我正在使用RubyOnRails，所以我的所有样式表都应该自动包含。

我想让我的下拉列表更加用户友好，我选择了Chsen插件。

这是我的页面代码：

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/chosen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/chosen.jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/chosen.jquery.min.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

所以包含了javascripts和样式表，是吗？

我的HTML代码（来自exmple）：

       <select tabindex="1" style="width:350px;" data-placeholder="Choose a Country">
            <option value=""></option> 
            <option value="United States">United States</option> 
            <option value="United Kingdom">United Kingdom</option> 
            <option value="Afghanistan">Afghanistan</option> 
            <option value="Albania">Albania</option>                
          </select>

在我的application.js文件中：

  $(document).ready(function(){
  $(".chzn-select").chosen();
  });

Google控制台中没有错误，但在我的页面中，它显示为默认选择列表。为什么？

Answer 1

您需要在select标签中添加“chzn-select”类。您的js代码将所选插件应用于它找到的使用该类的任何元素。以下是您的选择标记的外观：

<select class="chzn-select" tabindex="1" style="width:350px;" data-placeholder="Choose a Country">
    <option value=""></option> 
    <option value="United States">United States</option> 
    <option value="United Kingdom">United Kingdom</option> 
    <option value="Afghanistan">Afghanistan</option> 
    <option value="Albania">Albania</option>                
</select>

Answer 2

在您的选择标记上，您需要添加class="chzn-select"才能实际启用所选内容。

无法理解选择插件无效的原因

2 个答案: