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

enter image description here

This is the input I want to add my project https://select2.org/tagging but it's show like this:

enter image description here

I added Select2 installation links but it doesn't work. What am I doing wrong?

<!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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
    <title>Document</title>
</head>


<body>
    <select >
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </select>


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

</body>

</html>

CodePudding user response：

The class name in your script doesn't occur in your markup. It needs to be on the select element.

Also, you don't seem to be loading jQuery, on which Select2 depends.

<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/[email protected]/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/[email protected]/dist/js/select2.min.js"></script>
</head>

<body>
    <select >
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </select>


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

</body>