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" /> https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js <link href="../inc/bipro.css" rel="stylesheet" type="text/css"> <title>Test</title> </head> <body> <br>


                
                   select2
                

                
    					
    						wybierz
    						banany
    						cytryny
    						jabłka
    					
                

             </div>
          </div>
       </div>
    </div>
    
    
    
   
    https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js
    https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js
    
    $(document).ready(function() {
    	 $('.aaaa').select2();
    });
    	
    
    </body>
    </html>

What am I doing wrong

You didn't include jquery which is a requirement for bootstrap AND select2
– ADreNaLiNe-DJ
Jul 2 at 9:31

bootstrap

select2

Got https://code.jquery.com/jquery-3.3.1.slim.min.js before popper.js and still doesnt working
– Łukasz Mikowski
Jul 2 at 9:37

https://code.jquery.com/jquery-3.3.1.slim.min.js

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.

https://code.jquery.com/jquery-3.3.1.min.js

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:

$(document).ready(function() { $('.js-select').select2(); });

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.

1 Answer
1

搜尋此網誌

Fjhtyj