1

I am trying to attach the select2 to a choice field named: Filters. The functionality i'm interested in is the search function it provides.

This is my code, but I can't get it to work? Please help

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('Filters').select2();
});
              </script>

Thanks!

UPDATE - SOLUTION

The thing that was causing my problem was that i had several script editors on the newform, and all of them were referencing the jquery. When referencing more than one on the same page it causes select2 to not load.

This is the code that worked for me:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 

<script type="text/javascript">
$(document).ready(function() {
$('[title=Filters]').select2();
});
</script>
1

First of all, I think it's required to include jquery before select2. In order to apply select2 on your desired select field, you must target it with its title attribute like so:

$('[title=Filters]').select2();

You may right-click and inspect-element to be sure your field has that name.

Not the answer you're looking for? Browse other questions tagged or ask your own question.