jquery.min.js：2未捕获的TypeError：$（…）.select2不是函数

Question

Form for the selection this form look like selection and then select the code

<div class="form-group">
                        <label>Multiple</label>
                      <select class="form-control select2 select2-hidden-accessible" multiple="" data-placeholder="Select a State" style="width: 100%;" tabindex="-1" aria-hidden="true" name="select2">
                          <option>Alabama</option>
                          <option>Alaska</option>
                          <option>California</option>
                          <option>Delaware</option>
                          <option>Tennessee</option>
                          <option>Texas</option>
                          <option>Washington</option>
                        </select>
                        </div>   

This is the link Code error is here error comes on javaScript Function

         @section('footerSection')
              <script  language="JavaScript" type="text/javascript" src="{{ asset('/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
            <script language="JavaScript" type="text/javascript" src="{{ asset('/admin/bower_components/jquery/dist/jquery.min.js')}}"></script>

            <script type="text/javascript"> 
             $( document ).ready(function() {

               $(".select2").select2();

              });
            </script>
             @endsection

Answer 1

You need to switch the src order. select2 is probably trying to use jquery before it is defined.

<script language="JavaScript" type="text/javascript" src="{{ asset('/admin/bower_components/jquery/dist/jquery.min.js')}}"></script>
<script  language="JavaScript" type="text/javascript" src="{{ asset('/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>