chosen jquery plugin basic ui does not work

问题

I want to use chosen jquery plugin just like the same example that they use in the official website: http://harvesthq.github.io/chosen/

These are my files:

This is 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>

Result looks like this:

Is wrong? I saw the html code generated by the official page and it was not the same. When I changed my code to this one:

<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>

I got this:

Do I need to do something else to get the same result of the official example?

回答1:

Try this in index.html

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

DEMO

回答2:

The reason this code did not work is that it appeared before the select element in the source order - thus when the script was run there were no matching elements in the DOM (Document Object Model) to apply the chosen plugin methods against.

Many developers now place their scripts at the bottom of the page - just before the closing body element tag - which both helps ensure that the elements you wish to interact with are in the DOM at the time, and improves performance as the browser will stop loading the DOM or any other assets (these are normally loaded in parallel/simultaneously) when it reaches a script, resuming only when it has executed. This is largely for legacy reasons where developers would use document.write to dynamically add content to the page - the expectation was that this content should appear where the script is, not where the browser happened to have reached building the DOM when the write statement was called.

I would change your first example as follows-

<!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>

This works in two ways. Firstly the placement of the scripts is at the end of the page so the select element should already be in the DOM when run. Secondly the document ready event handler guarantees that the anonymous function we created won't be run until the browser has fully loaded/built the DOM. The code is in a function as otherwise it would be executed immediately by the browser (and there would be a syntax error as the ready method expects a function as a parameter). The document ready event (known as DOMContentLoaded in modern browsers) is preferable to window.onload as it fires before the window load event, potentially whilst the browser is still loading images or other large assets needed by the page. This means your page is less likely to suddenly change after the user has started interacting with it.

Some other points-

You definitely need a doctype in your documents
Try to always put stylesheets before scripts
You had two closing body element tags
Only one select option can be selected - have the selected attribute - at any one time.
The attributes multiple, selected and disabled are boolean attributes, no value is required (you can remove the ="")

See http://learn.jquery.com/using-jquery-core/document-ready/ for more

来源：https://stackoverflow.com/questions/20811270/chosen-jquery-plugin-basic-ui-does-not-work

标签

javascript

jquery

html

jquery-chosen