首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在html文件中使用选定的jQuery?

如何在html文件中使用选定的jQuery?
EN

Stack Overflow用户
提问于 2012-12-19 02:41:18
回答 3查看 74K关注 0票数 18

如何在html页面中应用所选的jQuery?

我有一个select表单,所以我需要使用multiple select by friendly来使它看起来更用户友好。

代码语言:javascript
复制
<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>

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

因此,我所做的就是在<head>中包含chosen.jquery.min.js

代码语言:javascript
复制
<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>

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

我不知道将该JavaScript语句放在哪里才能调用所选的多个select语句。我认为这和使用Bootstrap一样简单,哈。有什么帮助吗?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-12-19 02:49:45

如果你关注一个Bootstrap's example markup structures,你会注意到他们在底部调用所有的JavaScript文件(就在</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文件中,您需要添加如下内容:

代码语言:javascript
复制
$(function(){
    $(".chzn-select").chosen();
});
票数 7
EN

Stack Overflow用户

发布于 2012-12-19 02:44:43

您的select必须具有类chzn-select,通常您将在页面加载后运行一个脚本,如下所示:

代码语言:javascript
复制
$(function() {
    $(".chzn-select").chosen();
});

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

代码语言:javascript
复制
<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>
票数 19
EN

Stack Overflow用户

发布于 2012-12-19 02:45:45

代码语言:javascript
复制
<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>
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13939369

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档