どのように複数の選択ボックスを作成してタグを作成する

Question

私はこのコードを使用してselect2.min.cssとselect2.min.jsをhttps://github.com/select2/select2からダウンロードし、プロジェクトのcssとjsファイルにコピーします。 HTMLコードのコードは次のとおりですここをクリックしてください：

<link rel="stylesheet"href="https: 
//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link type="text/css" rel="stylesheet" href=" 
     {{asset('css/select2.min.css')}}"> 
    <script type="text/javascript" src="{{asset('js/select2.full.min.js')}}"> 
     </script> 
    <script type="text/javascript" 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    </script> 
    <script type="text/javascript" src="{{asset('js/select2.min.js')}}"> 
    </script> 

<div class="form-group"> 
     <label class="control-label col-sm-2" for="tags">tags:</label> 
     <select class="form-control select2-multi" name="tags" 
     multiple="multiple"> 
      @foreach($tags as $tag) 
       <option value='{{$tag->id}}'>{{$tag->name}}</option> 
      @endforeach 
     </select> 
    </div> 
    <script> 

    $('.select2-multi').select2(); 


</script> 

しかし、このコードは私のためには機能しませんでした。どのように修正できますか？ このコードの画像はこちら

Answer 1

$は定義されていないため、プロジェクトにjQueryを含める必要があります。以下はサンプルです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script> 
 

 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="tags">tags:</label> 
 
    <select class="form-control select2-multi" name="tags" multiple="multiple"> 
 
     <option value='tag1'>tag 1</option> 
 
     <option value='tag2'>tag 2</option> 
 
     <option value='tag3'>tag 3</option> 
 
    </select> 
 
</div> 
 

 
<script> 
 
    $('.select2-multi').select2(); 
 
</script>

しかし、いつものように準備ができてDOM上のJSコードを含めることをお勧めになります。

$(function(){ 
    $('.select2-multi').select2(); 
});