javascript - 在 html 文件中加载 Chosen.jquery.js 文件不起作用

Question

我试图在我的 html/css 文件中加载 chosen.jquery.js 文件以实现可搜索的下拉列表，但它似乎不起作用。我从 http://harvesthq.github.io/chosen/ 下载了 chosen.js 插件.下载插件后，我将所选文件(js 和 css)复制到我的工具的/includes 文件夹中。

这是我到目前为止尝试过的:

<script src="../includes/chosen.jquery.js"></script>
<script src="../includes/chosen.jquery.min.js"></script>
<script src="../includes/chosen.proto.js"></script>
<link rel="stylesheet" href="../includes/chosen.css" />
<link rel="stylesheet" href="../includes/chosen.min.css" />

<div class="searchform">

        <form class="pure-form" action="searchresults.php" method="post">
            <fieldset>
        <div class="searchfilters">
                <label>Search Filters: </label>
          <div class="search_boxes">                
         <select class="chosen-select" style="width:350px;" onchange="this.form.submit()">

                        <!--<option selected="selected">Search Project/Initiative...</option>-->
                        <?php
                                include "../includes/search_dropdown.php";
                                foreach($proj_ini_Array as $qa){
                                echo "<option value = \"$qa\">$qa</option>";
                                }
                        ?>   

在选择框中我有“选择-选择”。在多个地方，该类仅被声明为“已选择”或“chzn-select”。哪一个合适？另外，我不确定 .min 文件的用途是什么？

我在这里错过了什么？

提前致谢。

Answer 1

您复制了 CSS 和 min.css。还有 jquery 和 jquery.min 版本。

Min 代表缩小 - 基本上是为了服务速度而压缩。

您似乎还同时使用了 chosen 的 jQuery 和 Prototype 版本。 你在其他地方使用 Prototype JS 库吗？如果不是，我会删除它并只使用(一个版本)Chosen for JQuery。您还应该确保包括 jQuery 本身……是在您的代码中的其他地方吗？

在此基础上，您需要的包括:

<script src="../includes/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="../includes/chosen.min.css" />

或者，如果您还没有包含 jQuery - 从以下位置下载:

http://code.jquery.com/jquery-1.10.2.min.js

并将其存储到您的包含文件夹中。将其添加到所选文件上方:

<script src="../includes/jquery-1.10.2.min.js"></script>

一旦你删除了那些额外的文件，它应该很简单:

$('.chosen-select').chosen();

在现有的或新的 jQuery .ready() 调用中 [DOM 准备就绪后立即运行]

并确保在每个要使用 Chosen 的选择字段上都有 class="chosen-select"。

更新:

尝试添加这个来启动选择:

<script>
$(document).ready(function() {
   $('.chosen-select').chosen();
});
</script>

这可以放在 HTML 页面的部分中，也可以放在结束标记之前。应该在任何一个工作 - 在关闭之前将是我的选择。