个人中心
gpt4 book ai didi

javascript - 选择的 jquery 插件基本 ui 不起作用

转载 作者：搜寻专家 更新时间：2023-10-31 21:57:57 25 4
gpt4 key购买 nike

我想使用选择的 jquery 插件，就像他们在官方网站上使用的相同示例:http://harvesthq.github.io/chosen/

enter image description here

这些是我的文件:

enter image description here

这是 index.html:

<html>
    <body>
        <head>
            <script src="jquery-1.9.1.js"></script>
            <script src="chosen.jquery.js"></script>
            <link rel="stylesheet" href="chosen.css">
        </head>
        <body>
            <script type="text/javascript">
                $(".chosen-select").chosen()
            </script>


            <select class="chosen-select" tabindex="8" multiple="" style="width:350px;" data-placeholder="Your Favorite Types of Bear">
                <option value=""></option>
                <option>American Black Bear</option>
                <option>Asiatic Black Bear</option>
                <option>Brown Bear</option>
                <option>Giant Panda</option>
                <option selected="">Sloth Bear</option>
                <option disabled="">Sun Bear</option>
                <option selected="">Polar Bear</option>
                <option disabled="">Spectacled Bear</option>
            </select>
        </body>
    </body>
</html>

结果是这样的:

enter image description here

错了吗？我看了官方页面生成的html代码，不太一样。当我将我的代码更改为这个代码时:

<html>
    <head>
        <script src="jquery-1.9.1.js"></script>
        <script src="chosen.jquery.js"></script>
        <link rel="stylesheet" href="chosen.css">

        <script type="text/javascript">
            $(".chosen-select").chosen()
        </script>
    </head>
    <body>
        <select data-placeholder="Your Favorite Types of Bear" style="width:350px; display:none" multiple class="chosen-select" tabindex="-1">
            <option value=""></option>
            <option>American Black Bear</option>
            <option>Asiatic Black Bear</option>
            <option>Brown Bear</option>
            <option>Giant Panda</option>
            <option selected>Sloth Bear</option>
            <option disabled>Sun Bear</option>
            <option selected>Polar Bear</option>
            <option disabled>Spectacled Bear</option>
        </select>

        <div class="chosen-container chosen-container-multi" style="width: 350px;" title="">
            <ul class="chosen-choices">
                <li class="search-field">
                    <input class="default" type="text" style="width: 183px;" autocomplete="off" value="Your Favorite Types of Bear" tabindex="8">
                </li>
            </ul>

            <div class="chosen-drop">
                <ul class="chosen-results">
                    <li class="active-result" data-option-array-index="1" style="">American Black Bear</li>
                    <li class="active-result" data-option-array-index="2" style="">Asiatic Black Bear</li>
                    <li class="active-result" data-option-array-index="3" style="">Brown Bear</li>
                    <li class="active-result" data-option-array-index="4" style="">Giant Panda</li>
                    <li class="active-result" data-option-array-index="5" style="">Sloth Bear</li>
                    <li class="disabled-result" data-option-array-index="6" style="">Sun Bear</li>
                    <li class="active-result" data-option-array-index="7" style="">Polar Bear</li>
                    <li class="disabled-result" data-option-array-index="8" style="">Spectacled Bear</li>
                </ul>
            </div>
        </div>          
    </body>
</html>

我明白了:

enter image description here

是否需要做其他事情才能得到与官方示例相同的结果？

最佳答案

此代码不起作用的原因是它出现在源顺序中的选择元素之前 - 因此当脚本运行时，DOM(文档对象模型)中没有匹配的元素来应用所选的插件方法。

许多开发人员现在将他们的脚本放在页面底部 - 就在结束 body 元素标记之前 - 这既有助于确保您希望与之交互的元素当时在 DOM 中，又可以提高浏览器的性能当它到达脚本时将停止加载 DOM 或任何其他 Assets (这些通常是并行/同时加载的)，只有在它执行后才会恢复。这主要是出于遗留原因，开发人员会使用 document.write 将内容动态添加到页面 - 期望该内容应该出现在脚本所在的位置，而不是浏览器在编写语句时碰巧到达构建 DOM 的位置打电话。

我会改变你的第一个例子如下-

<!doctype html>
<html>
    <body>
        <head>
            <title>Add a title</title>
            <link rel="stylesheet" href="chosen.css">
        </head>
        <body>
            <select class="chosen-select" tabindex="8" multiple style="width:350px;" data-placeholder="Your Favorite Types of Bear">
                <option value=""></option>
                <option>American Black Bear</option>
                <option>Asiatic Black Bear</option>
                <option>Brown Bear</option>
                <option>Giant Panda</option>
                <option selected>Sloth Bear</option>
                <option disabled>Sun Bear</option>
                <option>Polar Bear</option>
                <option disabled>Spectacled Bear</option>
            </select>

            <script src="jquery-1.9.1.js"></script>
            <script src="chosen.jquery.js"></script>
            <script>
                $(document).ready(function() {
                    $(".chosen-select").chosen();
                 });
             </script>
    </body>
</html>

这有两种方式。首先，脚本放置在页面末尾，因此选择元素在运行时应该已经在 DOM 中。其次，文档就绪事件处理程序保证我们创建的匿名函数在浏览器完全加载/构建 DOM 之前不会运行。代码在一个函数中，否则它会被浏览器立即执行(并且会出现语法错误，因为就绪方法需要一个函数作为参数)。文档就绪事件(在现代浏览器中称为 DOMContentLoaded)优于 window.onload，因为它在窗口加载事件之前触发，可能同时浏览器仍在加载页面所需的图像或其他大型 Assets .这意味着您的页面不太可能在用户开始与其交互后突然更改。

其他几点-

  • 您的文档中肯定需要文档类型
  • 尝试始终将样式表放在脚本之前
  • 你有两个结束的 body 元素标签
  • 在任何时候只能选择一个选择选项 - 具有 selected 属性。
  • 属性 multiple、selected 和 disabled 是 bool 属性，不需要任何值(可以去掉 ="")

参见 http://learn.jquery.com/using-jquery-core/document-ready/更多

关于javascript - 选择的 jquery 插件基本 ui 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20811270/

25 4 0
文章推荐： php - 上传时调整 Wordpress 图片大小
文章推荐： PHP 在网站内按图像搜索
文章推荐： swift - 如何在 Swift 2.0 中静音 "Default will never be executed"
文章推荐： php - IIS 7.5 丢失 $_POST 数据？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com