Hello Friends, today I am going to share how to use Select2 Api. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. I am going to use cdn file but you can also download it and use it on your local server.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" /> </head> <body> <div style="width: 100%; height: 100%; margin: auto; text-align: center;padding:25px;"> <select class="form-control select2" multiple="multiple"> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value="Berry">Berry</option> <option value="Guava">Guava</option> <option value="Orange">Orange</option> <option value="Pine Apple">Pine Apple</option> </select> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <script> $('.select2').select2(); </script> </body> </html> |
Output
Thanks Friends
Please share if you like it
Comments