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

user_17110432 0
Viewed 58

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/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>
jquery-select2 twitter-bootstrap html javascript
1 Answers

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

user_12648040
Related