18

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

我有一个select表格，所以我需要使用multiple selectby Chosen 来使它看起来更加用户友好。

<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 一样简单，哈哈。有什么帮助吗？

4

3 回答 3

20

你select必须有 class 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>
于 2012-12-18T18:44:43.287 回答
7

如果您遵循Bootstrap 的示例标记结构之一，您会注意到它们在底部（</body>标记正上方）调用所有 JavaScript 文件。

你也会想做同样的事情；就像是：

    </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();
});
于 2012-12-18T18:49:44.583 回答
4 
<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>
于 2012-12-18T18:45:44.970 回答