0
218
ViewsWhy isn't Select2 being applied to my select element?
This is the input I want to add my project https://select2.org/tagging but it's show like this:
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>
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question