Question

我正在尝试在我的html / css文件中加载selected.jquery.js文件以实现可搜索的下拉列表，但它似乎无法正常工作。我从http://harvesthq.github.io/chosen/下载了selected.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代表缩小 - 基本上压缩服务速度。

您似乎也在使用所选的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准备好后立即运行]

确保您在要选择的每个选择字段上使用class =“selected-select”。

更新：

尝试添加此项以启动选择：

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

这可以在HTML页面的部分中，也可以在结束标记之前。应该工作 - 在结束之前就是我的选择。

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

1 个答案: