为什么 Select2 没有应用于我的 select 元素？

Question

这是我要添加我的项目的输入 https://select2.org/tagging 但它显示如下：

我添加了 Select2 安装链接，但它不起作用。我做错了什么？

<!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.0">

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <title>Document</title>
</head>


<body>
    <select class="form-control">
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </select>


    <script>
    $(".js-example-tags").select2({
        tags: true
    });
    </script>

</body>

</html>

Answer 1

脚本中的 class 名称没有出现在标记中。它需要在 select 元素上。

此外，您似乎没有加载 Select2 所依赖的 jQuery。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>

<body>
    <select class="form-control js-example-tags">
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </select>


    <script>
    $(".js-example-tags").select2({
        tags: true
    });
    </script>

</body>

为什么 Select2 没有应用于我的 select 元素？

Why isn't Select2 being applied to my select element?

html

javascript

twitter-bootstrap

jquery-select2