如何在我的 html 文件中使用 Chosen jQuery？答案

【问题标题】：How do I use Chosen jQuery in my html file?如何在我的 html 文件中使用 Chosen jQuery？
【发布时间】：2012-12-18 18:41:18
【问题描述】：

如何在我的 html 页面中应用 Chosen jQuery？

我有一个 select 表单，所以我需要使用 Chosen 的 multiple select 使它看起来更友好。

<select class="chosen" multiple="true" name="faculty">
        <option value="AC">A</option>
        <option value="AD">B</option>
        <option value="AM">C</option>
        <option value="AP">D</option>
</select>

我已下载文件并将其复制到我的网页文件夹中。

所以，我所做的是将chosen.jquery.min.js 包含在<head> 中：

<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>

指令说调用所选插件：$(".chzn-select").chosen();

我不知道将该 JavaScript 语句放在何处以调用选择的多选。我认为这就像使用 Bootstrap 一样简单，哈哈。有什么帮助吗？

【问题讨论】：

如果您已将文件包含到您的页面中，它应该就像在页面底部创建

标签： jquery html

【解决方案1】：

您的select 必须具有chzn-select 类，通常您会在页面加载后运行如下脚本：

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

下面是一个经过测试的工作示例：

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
</head>
<body>

<script type="text/javascript">
$(function() {
    $(".chzn-select").chosen();
});
</script>

<select class="chzn-select" multiple="true" name="faculty" style="width:200px;">
        <option value="AC">A</option>
        <option value="AD">B</option>
        <option value="AM">C</option>
        <option value="AP">D</option>
</select>


</body>
</html>

【讨论】：

【解决方案2】：

如果您关注Bootstrap's example markup structures 之一，您会注意到他们在底部调用所有JavaScript 文件（就在</body> 标记上方）。

你也想这样做；类似：

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/script.js"></script>     <!-- Your custom JS -->

  </body>
</html>

在这个script.js 文件中，您需要添加如下内容：

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

【讨论】：

.chosen() 甚至可以做什么。我找不到有关该方法的任何文档。
@pnizzle “Chosen 是一个 jQuery 插件，它使冗长、笨重的选择框更加用户友好。” harvesthq.github.io/chosen .chosen() 是您将插件应用到选择器的方式。
对对对。我仔细看了看。非常有用。

【解决方案3】：

<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".chzn-select").chosen();
});
</script>

<select class="chzn-select" multiple="true" name="faculty">
        <option value="AC">A</option>
        <option value="AD">B</option>
        <option value="AM">C</option>
        <option value="AP">D</option>
</select>

【讨论】：