Question

我试图使用Select2库。但我还没有能够得到任何东西。即使我尝试这个简单的例子，它也没有用。 HTML文件，CSS文件和JS文件都在同一个文件夹中。

加载时，浏览器完全空白。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link href="select2.css" rel="stylesheet" />
    <script src="select2.js"></script>
</head>
<body>
    <div class="controls-group">
        <div class="controls">
            <script type="text/javascript">
                $(".example-basic-multiple").select2();
                <select class="example-basic-multiple" multiple="multiple">
                    <option value="AL">Alabama</option>
                    <option value="WY">Wyoming</option>
                </select>
            </script>
        </div>
    </div>
</body>
</html>

Answer 1

在链接到JS库之后，您需要将<select> 放在脚本标记的外部，最好放在<head>中：

       <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>title</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <link href="select2.css" rel="stylesheet" />
            <script src="select2.js"></script>
            <script> 
                $(function() {//Waits until the page is fully loaded before running code
                $(".example-basic-multiple").select2();
                });
            </script>
        </head>
        <body>
            <div class="controls-group">
                <div class="controls">                        
                    <select class="example-basic-multiple" multiple="multiple">
                        <option value="AL">Alabama</option>
                        <option value="WY">Wyoming</option>
                    </select>
                </div>
            </div>
        </body>
        </html>

选择不显示HTML文档中的元素

1 个答案: