HTML 文档中的 Select 元素未显示

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

你需要把<select> 放在脚本标签的外面，最好放在<head>，链接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>
            <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 文档中的 Select 元素未显示

Select element in HTML document not displaying

javascript

jquery

jquery-select2