CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapjquery-select2
Emre
Emre

Reputation: 35

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

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

Upvotes: 1

Views: 450

Answers (1)

isherwood
isherwood

Reputation: 61082

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

Upvotes: 1

Related Questions