Question

我尝试将Chosen的插件集成到我的HTML中，以增加下拉菜单功能。我向选择的样式表，JQuery和选择的JQuery添加了链接。另外，我通过JQuery创建了一个类以包含在我的标签中。关于它为什么不起作用的任何想法？

非常感谢

<!DOCTYPE html>
<html>

<head>
<title>Experiment</title>

<link type="text/css" rel="stylesheet" href="chosen.min.css">

<script type="text/text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/text/javascript" src="chosen.jquery.min.js"></script>



<script type="text/javascript">
$(function() {
    $("chosen-select").chosen();
});
</script>

<style type="text/css">
</style>



<body>

<table>
<tr>
  <td>
        <select class="chosen-select">
          <option value="" disabled selected>Title</option>
          <option value="clean">Clean</option>
          <option value="salvage">Salvage</option>
          <option value="rebuilt">Rebuilt</option>
        </select>
  </td>
  <td>
      <select class="chosen-select">
        <option value="" disabled selected>Title Status</option>
        <option value="in hand">In Hand</option>
        <option value="lien">Lien</option>
        <option value="missing">Missing</option>
      </select>
  </td>
  <td>
      <select class="chosen-select">
        <option value="" disabled selected>Title Stat</option>
        <option value="in hand">In Hand</option>
        <option value="lien">Lien</option>
        <option value="missing">Missing</option>
        <option value="ralph jr.">Missing</option>
        <option value="ralph">Missing</option>
      </select>
  </td>
</tr>
</table>





</body>
</html>

Answer 1

问题完全取决于您的<script>类型为text/text/javascript的事实。将它们更改为text/javascript，脚本将按预期运行。

还请注意，上述代码中缺少结尾处的</head>。

我已解决此问题，并在下面使用了绝对脚本引用：

<!DOCTYPE html>
<html>

<head>
  <title>Experiment</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $("chosen-select").chosen();
    });
  </script>

  <style type="text/css">

  </style>
</head>

<body>
  <table>
    <tr>
      <td>
        <select class="chosen-select">
          <option value="" disabled selected>Title</option>
          <option value="clean">Clean</option>
          <option value="salvage">Salvage</option>
          <option value="rebuilt">Rebuilt</option>
        </select>
      </td>
      <td>
        <select class="chosen-select">
          <option value="" disabled selected>Title Status</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
        </select>
      </td>
      <td>
        <select class="chosen-select">
          <option value="" disabled selected>Title Stat</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
          <option value="ralph jr.">Missing</option>
          <option value="ralph">Missing</option>
        </select>
      </td>
    </tr>
  </table>
</body>

</html>

Answer 2

我为此宝石努力了，最后（在Mezbah的建议下）通过视图页面顶部的以下脚本使它起作用：

src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<script>
    $( document ).ready(function() {
        $('.chosen-select').chosen({
            allow_single_deselect: true,
            no_results_text: 'No results matched',
            width: '80%'
        })
    });
</script>

然后在视图中：

<%= form.select :school_ids, School.where(state: "IL").all.map { |k| [k.name_city, k.id] },
    { include_blank: true, label: "Select Schools"},
    { :multiple => true, class: 'chosen-select', :data => {:placeholder => "Select School(s)"}} %>

另外，这是我的application.js：

//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require chosen-jquery
//= require_tree .

将选择的JQuery插件添加到我的HTML

2 个答案: