Simplest example of Select2 doesnt working
Simplest example of Select2 doesnt working
i'm trying to use Select2 select boxes, but it doesnt work on my page. My js skills is poor, so I try to do simplest example. I'm using bootstrap library. Whole code looking like:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8_polish_ci">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="../inc/bipro.css" rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<br>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
select2
</div>
<div class="card-body text-center">
<select class="aaaa form-control">
<option value="">wybierz</option>
<option value="1">banany</option>
<option value="2">cytryny</option>
<option value="3">jabłka</option>
</select>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.aaaa').select2();
});
</script>
</body>
</html>
What am I doing wrong
bootstrap
select2
Got
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> before popper.js and still doesnt working– Łukasz Mikowski
Jul 2 at 9:37
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
popper.js
Put it first of all scripts. The order of the script tags is really important.
– ADreNaLiNe-DJ
Jul 2 at 9:44
1 Answer
1
You aren't including jQuery which is required for both Bootstrap and Select2.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Make sure jQuery is imported before Bootstrap and Select2
You're missing the name="" property on your select. I'd also rename that class to something that makes sense, like js-select
name=""
select
js-select
<select class="js-select form-control" name="fullnames">
<option value="0">wybierz</option>
<option value="1">banany</option>
<option value="2">cytryny</option>
<option value="3">jabłka</option>
</select>
Then your script will look like this:
<script type="text/javascript">
$(document).ready(function() {
$('.js-select').select2();
});
</script>
Thanks! Works fine!
– Łukasz Mikowski
Jul 2 at 9:41
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You didn't include jquery which is a requirement for
bootstrapANDselect2– ADreNaLiNe-DJ
Jul 2 at 9:31